您的位置 首页 > 数码极客

webpack如何打包vue项目—webpack打包vue项目后生成的dist文件…

在webpack中需要把vue单文件组件打包需要经过下面几步:

一、前提:

忽略前面项目部署的流程,假定你的webpack项目中已经安装vue,并创建了vue单文件组件进行渲染了。

二、打包步骤:

1、安装vue文件加载器

$ cnpm i vue-loader vue-template-compiler -D

其中vue-loader为vue文件加载器,而vue-loader依赖于vue-template-compiler。

2、在配置文件web中,添加加载规则

//...... module: { rules: [ // ... { test: /\.vue$/, use: "vue-loader" } ] } //......

vue文件只经过vue-loader处理

3、爬坑:

很多教程中完成上面两步就可以实现webpack打包vue文件了,但是很多人照着做,在运行打包时还是报错了,如下:

重点是这句话:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

翻译为:使用vue-loader时没有相应的插件。确保在webpack配置中包含VueLoaderPlugin。

是的,在vue-loader v15版本之后,我们需要在webpack的配置文件中配置一下VueLoaderPlugin,plugin为插件,所以我们需要这么做:

//web //引入插件 const VueLoaderPlugin = require('vue-loader/lib/plugin'); //...... plugins: [ //...... new VueLoaderPlugin() //配置插件 ] //......

配置完成之后,再运行就没有问题了。


责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“webpack如何打包vue项目,webpack打包vue项目后生成的dist文件,webpack打包vue项目app.js过大,webpack打包vue项目步”边界阅读