vue-cli3 神奇的打包错误

Question

前言

今天上午我打包了一个Vue项目该项目基于 vue-cli3 创建,代码也写了不少了由于之前一直开发模式编写没有测试打包,结果编译的时候出现了问题.

运行:

npm run build

控制台错误如下:

> vue-cli-service build


|  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                        21:03:31
 error 

js/app.84ea6161.js from Terser
Unexpected token operator «+», expected punc «,» [webpack/bootstrap:70,1249][js/app.84ea6161.js:71,1260]

执行到这里报错后 vue-cli 就停止了运行, dist 目录下没有输出任何内容, 我无法判断代码哪里出现了问题.

于是开始百度, 得到的答案是由于 UglifyJsPlugin 插件不支持 ES6 代码的压缩导致的错误, 解决思路就是查看项目依赖的模块中是否有某些模块使用了ES6编写, 找到这些模块然后配置 babel 来事先转译它们为ES5代码.

不过我的项目中的依赖没有一个模块是ES6模块:

  "dependencies": {
    "axios": "^0.19.0",
    "element-ui": "^2.8.2",
    "humps": "^2.0.1",
    "normalize.css": "^8.0.1",
    "querystringify": "^2.1.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.6",
    "vuex": "^3.0.1"
  },

而且我没有修改 vue-cli 的配置使用的就是默认的

而且这些文章的时间都是在2017年使用的都不是 vue-cli3 . vue-cli 生成的项目都是基于 webpack 配置的和现在的 vue.config.js 不同.而且报错还不一样普遍报错的都是 UglifyJsPlugin 插件报错,例如:

d.js from UglifyJs
Unexpected token operator «=», expected punc «,» [./node_modules/quill-image-extend-module/index.js:12,0][build.js:76527,35]

但是我报错的插件是 Terser , 于是我想把这个插件给禁用掉观察一下问题,我找到了 ./node_modules/@vue/cli-service/lib/config/prod.js 该文件中应该保存了生产环境的 webpack 配置,我将 Terser 给注释掉了.

module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
    if (process.env.NODE_ENV === 'production') {
      const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
      const getAssetPath = require('../util/getAssetPath')
      const filename = getAssetPath(
        options,
        `js/[name]${isLegacyBundle ? `-legacy` : ``}${options.filenameHashing ? '.[contenthash:8]' : ''}.js`
      )

      webpackConfig
        .mode('production')
        .devtool(options.productionSourceMap ? 'source-map' : false)
        .output
          .filename(filename)
          .chunkFilename(filename)

      // keep module.id stable when vendor modules does not change
      webpackConfig
        .plugin('hash-module-ids')
          .use(require('webpack/lib/HashedModuleIdsPlugin'), [{
            hashDigest: 'hex'
          }])

      if (process.env.VUE_CLI_TEST) {
        webpackConfig.optimization.minimize(false)
      } else {
        
        // const TerserPlugin = require('terser-webpack-plugin') // 将这里注释了
        // const terserOptions = require('./terserOptions')// 将这里注释了
        // webpackConfig.optimization.minimizer([// 将这里注释了
        //   new TerserPlugin(terserOptions(options))// 将这里注释了
        // ])
      }
    }
  })
}

喜闻乐见没有任何效果, 报错还是一样的.

几近绝望的我开始修改 vue.config.js ,我随意将 filenameHashing 设置为了 false 原本想观察文件名称但是结果打包成功了, 现在我是彻底没有思路了, 望各位大佬赐教

Answer 1

在折腾了将近两天后终于发现了问题.

找到问题的方式非常简单, 查看了vue-cli的源码输出了内部的 source-map 然后就...... 没有解决?.

经过几次测试后查看输出和 source-map 的大致位置, 我知道问题出现在入口文件上虽然错误找不到.

于是我就逐步从入口屏蔽掉引用的模块, 一遍一遍的测试, 最终发现问题出现在了 router.js 中:

    import(
      /* webpackChunkName: "[name].[contenthash]" */
      /* webpackMode: "lazy-once" */
      `./routes/usertype-${value}.js`
    ).then((routeMap) => router.addRoutes(routeMap.default)).finally(() => Store.commit('routeMapLoaded'));

去掉 import 语法的 /* webpackChunkName: "[name].[contenthash]" */ 就可以了.

不过暂时还不清楚这是一个bug, 还是我使用方式有问题.