项目部署遇到的一些问题总结

项目开发中途决定采用的云效自动化部署，和本地环境还有一点差异，也遇到了一些问题，于是总结如下。

• 项目采用的VUE CLI3 构建

lintOnSave导致项目编译失败报错

• 本地的配置 lintOnSave 写的是开启，本地打包没问题，但是线上自动化打包就持续的报错，报错内容如下：

vue-cli-service build-  
Building for production...
 ERROR  
Failed to compile with 1 errors10:38:56

 error  
in ./src/main.js 

 Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Invalid regular expression flags
    at PoolWorker.fromErrorObj(/midware/softwares/hudson/workspace/5054_VDP_WEB/VDP_WEB/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at /midware/softwares/hudson/workspace/5054_VDP_WEB/VDP_WEB/node_modules/thread-loader/dist/WorkerPool.js:204:29
    at mapSeries (/midware/softwares/hudson/workspace/5054_VDP_WEB/VDP_WEB/node_modules/neo-async/async.js:3625:14)
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at no-octal-escape (/midware/softwares/hudson/workspace/5054_VDP_WEB/VDP_WEB/node_modules/eslint/lib/rules/index.js:171:30) 

 @ multi ./src/main.js

 ERROR  Build failed with errors.

这个报错检查了我很久的原因都没找到代码哪里写错了，尝试代码本地部署、打包也没出现这个问题，于是想到了环境原因导致了某些配置报错？

其中 lintOnSave：使用该配置选项开启保存时格式化代码文件，需要安装开发依赖 eslint-loader 和 @vue/cli-plugin-eslint俩个

// 是否在保存的时候使用 `eslint-loader` 进行检查。 
// 有效的值：`ture` | `false` | `"error"` // 当设置为 `"error"` 时，检查出的错误会触发编译失败。 

我设置的是true，按照道理来说不会导致编译失败，但是实际云效的前端node版本和包版本就会直接导致编译失败，出现上面的错误。

最后改为了false，就没报错了，但是为了区分环境，我最后的配置文件做了开发和正式环境的区分

 lintOnSave: process.env.NODE_ENV === 'development', // 是否在保存的时候检查

开启MOCKJS，导致流文件下载失败

• 测试环境我导入了MOCK以作模拟接口

// 如果是开发环境，则导入 mock
if (process.env.NODE_ENV === 'development') {
    require('./mock')
}

• 其中下载文件我直接对接的后端接口，对于流文件，我在axios的请求拦截器中把返回类型设置为 blob

// 和后端协定接口URL包含export  即为导出数据，需要修改返回类型
 if (config.url.includes('export')) {
   config.responseType = 'blob'
 }

• 但是下载的流文件一直打不开，EXCEL报错文件
• 最后排查，发现mock会把返回值变成json类型，导致流文件错误

部署正式环境自动去掉console

原来使用VUEcli2的时候，在项目中的build/webpack.prod.conf.js文件中

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true
  },

现在使用的是CLI3，使用以下方式：
安装插件 terser-webpack-plugin

yarn add terser-webpack-plugin --save-dev

• vue.config.js 修改配置

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
},