解決vue和vue-template-compiler版本不同報錯的問題

初學vue，准備打包App.vue項目，遇到報錯

報錯信息：

This may cause things to work incorrectly. Make sure to use the same version for both.

問題原因：

vue和vue-template-compiler版本不同，必須確保兩者都使用相同的版本。

在vue官網的webpack 配置可以看到：

Vue Loader 的配置和其它的 loader 不太一樣。除了通過一條規則將 vue-loader 應用到所有擴展名為 .vue 的文件上之外，請確保在你的 webpack 配置中添加 Vue Loader 的插件：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它規則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 請確保引入這個插件！
    new VueLoaderPlugin()
  ]
}

解決方法：

步驟一：在webpack.config.js文件下引入plugin插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

步驟二：

plugins: [
    // 請確保引入這個插件！
    new VueLoaderPlugin()
  ]

我是先安裝測試了13和14版本，運行后，發現又報錯了

解釋：未找到plugin插件，原來15版本以上才有plugin插件，那就升級vue-loader

步驟三：

npm install --save-dev vue-loader@15.9.3

步驟四：升級vue-template-compiler,確保vue和vue-template-compiler兩者都使用相同的版本。

npm upgrade vue vue-template-compiler

安裝成功，這樣就可以成功打包vue項目了