时间戳

首页 > 解决方案 > VueJS：为生产构建时出错

vue.js - VueJS：为生产构建时出错

问题描述

我一直在尝试构建我以前构建得很好的代码的生产版本。现在，当我vue build在 main.js 文件上运行时，它提供了以下内容：

\  Building for production...Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
\  Building for production...Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
\  Building for production...Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
(node:10708) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: CSS minification error: Unknown browser query `basedir=$(dirname "$(echo "$0" | sed -e 's`. Maybe you are using old Browserslist or made typo in query.. File: css/app.75eb53b0.css
(node:10708) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

我试图通过手动更新包和依赖于它的包、启动新项目、运行npm --depth 999命令（深度 9999 导致内存堆错误）以及我能找到的所有其他内容来解决 Browserslist/caniuse-lite 错误做。我没有使用 VS（使用 VS 代码），但试图通过从我的 AppData 中删除 WebCompiler 信息来解决问题，但开始时没有 WebCompiler 文件夹。

我还尝试恢复到 css-loader 2.1.1，它解决了在处理此问题时出现的另一个问题，但它没有解决这个问题。

任何帮助将不胜感激，因为这会阻止任何更新发布到生产。

我已尝试在其他线程中修复有关 Browserslist 警告的问题。此外，这些线程没有提到以下错误：

(node:10708) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: CSS minification error: Unknown browser query `basedir=$(dirname "$(echo "$0" | sed -e 's`. Maybe you are using old Browserslist or made typo in query.. File: css/app.75eb53b0.css
(node:10708) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

以下是我的项目的 package.json

{
  "name": "coeus",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/vue-fontawesome": "^0.1.7",
    "axios": "^0.19.0",
    "bcrypt": "^3.0.6",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "bootstrap-vue": "^2.0.2",
    "browserslist": "^4.7.0",
    "caniuse-lite": "^1.0.30000997",
    "cors": "^2.8.5",
    "dns": "^0.2.2",
    "express": "^4.17.1",
    "express-fileupload": "^1.1.5",
    "fast-csv": "^3.4.0",
    "json-loader": "^0.5.7",
    "jsonwebtoken": "^8.5.1",
    "method-override": "^3.0.0",
    "mongoose": "^5.7.1",
    "morgan": "^1.9.1",
    "nodemailer": "^6.3.0",
    "npm": "^6.11.3",
    "path": "^0.12.7",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "css-loader": "^2.1.1",
    "style-loader": "^1.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

标签： vue.jsnpmvue-clivue-cli-3

解决方案

我不确定这是为什么（我可能在文档中错过了它），但我发现我正在使用vue build命令来构建生产版本。在查看了一些东西之后，我尝试了npm run build，不仅没有收到 Browserslist 警告，而且也没有遇到缩小错误。谢谢大家的帮助！

推荐阅读