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)
}