初學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 [email protected]

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

npm upgrade vue vue-template-compiler

安裝成功，這樣就可以成功打包vue專案了