Vue.js打包报错[Cannot find module 'vue-loader/lib/plugin']如何解决？

Webpack打包Vue.js项目时，根据官方文档在 [webpack.config.js] 中配置 [vue-loader] 

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

 

module.exports = {

  entry: path.join(__dirname,'./src/main.js'),

  output: {

    path: path.join(__dirname, './dist'),

    filename: 'bundle.js'

  },

  plugins: [

    new VueLoaderPlugin()

  ],

  module: {

    rules: [

      {test: /\.vue$/, use: 'vue-loader'}

    ]

  }

};

打包时却意外报错[Cannot find module 'vue-loader/lib/plugin']，

Error: Cannot find module 'vue-loader/lib/plugin'

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)

at Function.Module._load (internal/modules/cjs/loader.js:562:25)

at Module.require (internal/modules/cjs/loader.js:692:17)

【解决方案】

对于以上问题，原因其实很简单，那就是[vue-loader] 官方从v-16.0.0版本开始就已经放弃了上述的引入方式，改以解构引入方式引入VueLoaderPlugin，详情可参考最新的官方文档

https://vue-loader.vuejs.org/guide/#manual-setup

以下为 [vue-loader] 官方文档中提供的配置案例

// webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')



module.exports = {

  module: {

    rules: [

      // ... other rules

      {

        test: /\.vue$/,

        loader: 'vue-loader'

      }

    ]

  },

  plugins: [

    // make sure to include the plugin!

    new VueLoaderPlugin()

  ]

}

所以，对于安装[vue-loader@16.0.0]以上版本的用户，只要按照最新的方式配置，就能完美地解决问题。

如果你去查看node_modules中 [vue-loader]的包，你也可以发现，里面确实根本不存在【vue-loader/lib/plugin】这样的文件夹路径。

另外，网上有很多人建议将[vue-loader] 进行降级处理，安装[vue-loader@15] 版本，这里并不建议这样做，因为这并不能从根本上解决问题，毕竟日后升级之后还是要面对这个问题，而且[vue-loader] 是需要和[vue-template-compiler] 配合使用的，当[vue-loader] 和[vue-template-compiler] 版本差距过大，编译依旧会失败。