vue项目中常见开发技巧及问题解决

给组件添加原生事件

对于第三方框架或者一些封装的内置组件，若是想绑定事件，须要再v-on上添加修饰符.native

<my-component v-on:click.native="doTheThing"></my-component>

使用promise以后，IE浏览器不识别（IE9+），报错

由于整个IE系列都不支持promise的缘故，因此没法使用promise，这里须要用到一个垫片

npm install es6-promise

// 在main.js中引入
require('es6-promise').polyfill()

跨域问题

常常遇到的报错No 'Access-Control-Allow-Origin' header is present on the requested resource.

1：CORS，先后端都对应配置，IE10+

2：nginx反向代理

线下开发，若是使用了vue-cli，里面的webpack引入了proxyTable能够作接口反向代理

// 在config目录下的index.js

proxyTable: {
  "/bp-api": {
    target: "http://pengzhixin.com",
    changeOrigin: true,
    // pathRewrite: {
    //   "^/api": "/"
    // }
  }
}
  
// target: api代理的实际路径
// changeOrigin: 改变源头
// pathRewrite: 路径重定向

除此以外，jsonp请求能够，但局限性不少。

生产环境中背景图片消失

在开发环境中，背景图片都显示正常，可是一打包上传到生产环境就发现有一些背景图片没法正常显示，观察DOM发现图片路径指向错误了。

// build/webpack.bas.conf.js
module:{
  rules:[
    {
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }
    }
  ]
}

因为vue-cli的默认配置，小于10k的资源都会打包成base64，因此没有这个问题。

咱们发现发生问题的都是大于10k的静态图片资源。

若是你使用了路由懒加载，也不会出现这个问题，由于路由懒加载最终的css是以style标签插入到index.html里面的。

咱们还可使用import或require引入这些过大的图片而后写成行内样式。但最简单的方法是如下这种：

// 在build/utils.js文件中的generateLoaders函数中加上publicPath配置项
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}