我在使用 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 来 self 的 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 次才能使现代构建成功(第一次遗留 bundle 失败，第二次遗留 bundle 成功但现代构建失败，第三次遗留和现代构建成功)。
Vue 问题
https://github.com/vuejs/vue-cli/issues/5399 有一个相关的 vue 问题
最佳答案
我遇到了同样的错误，我通过在 vue.config.js 中添加 lintOnSave: process.env.NODE_ENV === 'development' 修复了它。以下是帮助您解决问题的 list :
npx vue-cli-service inspect --mode production >> webpack.config.production.js在生产中生成webpack配置文件- 然后你可以看到
lint在terser之前。使得第一次yarn build失败，下次成功 - 所以在这种情况下，您可以在生产环境中关闭
lintOnSave
关于vue.js - 无法在 vue cli 3/4 中使用 babel 或 terser 删除 `console` 语句，但第二次构建运行有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62497239/