项目添加以vue为后缀名的vue文件,怎么解析打包

我们都知道,将css文件打包起来,需要加载css-loader和style-loader,那么vue文件打包也需要 下载插件:

npm install vue-loader vue-template-compiler --save -dev

下载过程:

下载成功样子:

下载完之后,你以为就完事了吗?no no no,还要到webpack.config.js文件中进行配置:

在module对象下的rules数组中添加一个对象:

<---正则表达式--->
{
test:/\.vue$/,
use:['vue-loader']
}

 你以为这样就结束了吗?那你就太天真了。

项目添加以vue为后缀名的vue文件,怎么解析打包_第1张图片

来带你看看你以为一切安好,npm runbuild打包之后的样子

项目添加以vue为后缀名的vue文件,怎么解析打包_第2张图片

怎么办?这么办:

首先看下载的是什么版本的vue-loader:

项目添加以vue为后缀名的vue文件,怎么解析打包_第3张图片

也就是说,14版本之后下载veu-loader,另外还要下载一个与之配套的插件,或者改成13以上14以下的版本:^13.0.0

项目添加以vue为后缀名的vue文件,怎么解析打包_第4张图片

你可能感兴趣的:(vue.js,前端,javascript)