Vue项目中使用webpack对文件进行打包时,由于.vue文件的特殊性,webpack一般无法正常对这类文件进行解析,我们可以通过以下方法对webpack进行配置:

打开webpack.config.js文件,在module.exports中加上以下内容:

module: {
  rules: [
    {
      test: /.css$/,
      use: [ 'css-loader', 'style-loader' ]
    },
    {
      test: /.vue$/,
      use: [ 'vue-loader' ]
    }
  ]
},

当然仅仅这样添加是没有用的,我们还需要安装css-loaderstyle-loadervue-loadervue-template-compiler

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

安装完以后运行webpack命令,若产生报错,在确保文件语法无错误的情况下,可以打开package.json文件查看一下css-loaderstyle-loadervue-loader三者的版本,将版本降低一些即可,我使用的版本配置是:

"css-loader": "^3.3.0",
"style-loader": "^1.0.0",
"vue-loader": "^13.0.0"

修改完版本之后运行npm install即可让配置生效。

对于其他类型的文件,一般而言也可以下载到对应的loader,按以上方法进行配置即可。