关于npm run build打包问题
在项目中使用vue-cli脚手架搭,由于实际项目问题,与自定义安装的项目目录略有差异。
自定义安装的项目是:test => src => 源码
也就是在test项目下,安装node依赖,进入src下,是项目的源码部分。
然后实际项目部分是,test2 => src => vue1、vue2
在src目录下是真正的项目部分,其实就是在src的下面有多个vue-cli建立的项目,这样的好处是,多个项目可以共用一套依赖,不用安装多次。
但是在实际打包过程也会有一些问题,在相应目录下执行打包命令npm run build
,有如下错误
类似的一些错误,上面是在引入的element-ui使用UglifyJs混淆时出了问题,之前还遇到的类似一个问题是在打包箭头函数等es6的内容时报错。这些错误都是一个原因,是在打包时转码es5不能识别。
解决办法
1
在项目build目录下的webpack.base.conf.js下
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['env']
},
include: [resolve('src'), resolve('test'), resolve('../../node-modules/.2.0.11@element-ui/src/mixins/emitter')]
},
按照这种方式修改,就可以解决问题。其中resolve后面的路径是报错的文件路径,我的这个路径就是上图中的路径。每个人项目实际的路径不一样,一定要看仔细。切莫大意写错路径哦!
2
使用了支持压缩ES6的uglifyjs
在项目build目录下的webpack.prod.conf.js下
先在文件中引入:
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)
然后修改
plugins: [
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// },
// sourceMap: true
// }),
new UglifyJsPlugin({
test: /\.js($|\?)/i
}),
]
别忘了先安装这个插件 npm i -D uglifyjs-webpack-plugin
地址是这个 点击这个