Webpack 4.0 打包 Vue 應用時出現無法使用Vue-loader問題及解決方法

Reaper622發表於2018-09-20
WebVue

問題產生

當我們寫好 app.vue webpack.config.js 後 滿心歡喜的在命令列輸入

npm run build
複製程式碼

後結果發現報出

vue-loader was used without the corresponding plugin. Make sure to include 
複製程式碼

此時會有兩種情況:

  • 你沒有安裝 vue-loader
  • 安裝了vue-loader但是在webpack.config.js中沒有配置

問題解決

當沒有安裝vue-loader時的解決方法

在Terminal輸入

npm install vue-loader
複製程式碼

此時問題應該已經解決

當已安裝vue-loader時

在webpack.config.js檔案中新增

const  {VueLoaderPlugin}  = require('vue-loader')
module.exports={
    ...
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/.vue$/,
                use:'vue-loader' //在webpack4.0中用use取代loader
            }
        ]
    }
}
複製程式碼

注：const {} = require() 為ES6的解構賦值

相關文章