3

我遇到了问题npm run build，它有效地调用了vue-cli-service build. 我的目标是删除console生产版本中的语句。然而，第一次失败了。如果我立即再次运行它（无需更改代码），它就会成功。

为了重现性和隔离性，我在节点 docker 中运行代码：

docker run --rm -it -v "$(pwd):/usr/src/app" node:14.4.0 /bin/bash

在 docker 我设置环境

npm ci

在干净的环境中，运行构建失败：

root@bd366b5873ca:/usr/src/app# npm run build

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build

PRODUCTION babel setup
production eslint setup.

⠦  Building for production...production eslint setup.
⠇  Building for production...PRODUCTION babel setup
⠼  Building for production...production eslint setup.
⠙  Building for production...

 ERROR  Failed to compile with 8 errors

这些错误都是eslint出现console.命令时的错误：

Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at XXXX

立即再次运行构建，构建成功：

root@bd366b5873ca:/usr/src/app# npm run build

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build

PRODUCTION babel setup
production eslint setup.

⠏  Building for production...

 WARNING  Compiled with 2 warnings

PRODUCTION babel setup和production eslint setup起源于我的babel.config.js和.eslint.rc。

我配置eslint如下，console.在生产中的语句失败：

# .eslintrc.js
if (process.env.NODE_ENV === 'production') {
  console.info('production eslint setup.')
}
module.exports = {
  root: true,

  env: {
    node: true
  },

  'plugins': ['jest'],

  'extends': [
    'eslint:recommended',
    'plugin:vue/recommended',
    '@vue/standard',
    'plugin:jest/recommended',
    'plugin:jest/style'
  ],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },

  parserOptions: {
    parser: 'babel-eslint',
    parserOptions: {
      babelOptions: {
        configFile: "babel.config.js"
      }
    }
  }

}

我已经将 babel 配置为删除console.语句：

# babel.config.js
/* eslint-disable no-var */
module.exports = (api) => {
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production')
  var plugins = []
  if (isProd) {
    console.info('PRODUCTION babel setup')
    plugins.push(['transform-remove-console', { exclude: [] }])
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins
  }
}

为了修复它，我还配置terser了删除console.语句：

# vue.config.js
module.exports = {
  'transpileDependencies': [
    'vuetify'
  ],
  publicPath: process.env.PUBLIC_SUB_PATH === ''
    ? '/' : '/' + process.env.PUBLIC_SUB_PATH + '/',
  runtimeCompiler: true,
  css: {
    extract: { ignoreOrder: true }
  },
  chainWebpack: config => {
    config.optimization.minimize = true
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

版本（来自package.json）。为了修复它，升级到 vue-cli 4，也发生在 vue-cli 3 中：

....
"dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.3.4",
    "vuetify": "^2.3.1",
    "vuex": "^3.4.0"
  },
....
"devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@vue/cli-service": "^4.4.4",
    "babel-eslint": "^10.1.0"
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^5.16.0",
    ...
}

问题：

控制台打印PRODUCTION babel setup并production eslint setup显示在一个干净的构建中，配置被加载了多次。然后它以某种方式失败。再次运行它似乎更简单，配置加载一次然后成功。

如何配置 vue 以第一次成功构建，删除控制台语句？

是缓存吗？

构建成功后，删除缓存：

rm -Rf ./node_modules/.cache

然后再次构建它 ( npm run build) 等于第一次运行：失败

现代建筑？

创建modern构建时（在npm run build填充缓存之后）：

 npm run build -- --modern

成功构建传统构建，但失败了现代构建：

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build "--modern"

PRODUCTION babel setup
production eslint setup.

⠏  Building legacy bundle for production...

 WARNING  Compiled with 2 warnings          

....
PRODUCTION babel setup
production eslint setup.

⠹  Building modern bundle for production...PRODUCTION babel setup
⠧  Building modern bundle for production...PRODUCTION babel setup
⠋  Building modern bundle for production...PRODUCTION babel setup
⠏  Building modern bundle for production...PRODUCTION babel setup
PRODUCTION babel setup
⠹  Building modern bundle for production...PRODUCTION babel setup
⠧  Building modern bundle for production...PRODUCTION babel setup
⠦  Building modern bundle for production...

 ERROR  Failed to compile with 3 errors 

Module Error (from ./node_modules/thread-loader/dist/cjs.js):

/usr/src/app/src/axios.js
   7:3  error  Unexpected console statement  no-console

成功后立即再次运行现代构建。因此，我总共需要运行 3 次才能使现代构建成功（第一次遗留捆绑包失败，第二次遗留捆绑包成功但现代构建失败，第三次遗留和现代构建成功）。

Vue 问题

在https://github.com/vuejs/vue-cli/issues/5399有一个相关的 vue 问题

4

1 回答 1

3

我遇到了同样的错误，我通过添加lintOnSave: process.env.NODE_ENV === 'development'来修复它vue.config.js。以下是帮助您解决问题的清单：

  • npx vue-cli-service inspect --mode production >> webpack.config.production.js在生产环境中生成 webpack 配置文件
  • 然后你可以看到lint是之前terser。它使第一次yarn build失败，下次成功
  • 所以在这种情况下，您可以关闭lintOnSave生产中的

关于lintOnsave

于 2020-07-31T03:01:47.937 回答