vue打包遇到的UglifyJs问题

今天准备打包最近手头正在做的一个vue项目到测试环境跑一下,顺便测试一下,可是不想打包的时候出现了

ERROR in static/js/vendor.6ee331eab7d8c9bf1876.js from UglifyJs
Unexpected token name «i», expected punc «;» [static/js/vendor.6ee331eab7d8c9bf1876.js:17007,11]

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-12-15T13_29_31_598Z-debug.log

起初也没太在意,直接把打好的包拿过去到nginx测试环境下一跑,谷歌浏览器下,还真没什么问题。本来打包也是为了测试一下,就顺带看了一眼ie,不看不知道,一看问题就来了,ie(包括ie11)下,页面一片空白,报了如下错误:


image.png

这可吓我一跳了,毕竟公司这个系统需要兼容到ie9的,于是乎,只好各种论坛社区找答案了。终于在github找到了我想要的。

在这里先贴上这个项目用到的依赖:

"dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "element-ui": "^2.0.5",
    "es6-promise": "^4.1.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

从github上面找到问题恰好出现在依赖包elementUI上,原因就出现在elementUI的依赖包里的es6语法没有被转成es5,而我项目中的babel-loader只对srctest目录做了处理,
未修改前的webpack.base.conf.js文件:

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
},

现在把elementUI的依赖包也加入到babel-loader的处理范围内,就解决上面的问题了。

修改后的webpack.base.conf.js文件:本文重点在这里

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'), resolve('/node_modules/element-ui/src'), resolve('/node_modules/element-ui/packages')]
},

改完之后,再次打包:

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

完美解决问题,放到测试环境一跑,ie9下也跑的很顺溜!

你可能感兴趣的:(vue打包遇到的UglifyJs问题)