记vue项目npm / yarn build过程中遇到的问题

昨天项目正式完工，今天组长大大让我把项目build一下部署到服务器上，我心想这有何难，然后就遇到了问题，笑哭~

问题一

问题描述

执行yarn build命令后，出现了错误：

ERROR in static/js/vendor.5346f984bedbd0ae0e43.js from UglifyJs
Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:2,0][static/js/vendor.5346f984bedbd0ae0e43.js:56667,32]

问题分析

经过查阅资料发现，是因为我在项目中引入了element-ui库，该库是用es6的语法编写的，但是浏览器并不支持es6的语法，需要转换成es5的语法才能执行。

解决问题

找到webpack.base.config.js文件，做如下修改：

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

然后就可以build成功了。

问题二

问题描述

build成功后，开熏地叫来组长大大，但是组长大大说，需要把sourceMap去掉，线上环境不允许有sourceMap存在，可以借此窥探源码结构。

问题分析

修改prod的环境配置来设置build生成的文件不含sourceMap。

解决问题

找到config文件下的index.js文件，做如下修改：

productionSourceMap: false,  //设置不生成sourceMap

然后执行一遍yarn build命令发现sourceMap没有了，完成任务。