npm run build --mode 失效：构建模式故障排除指南

2024-03-21 18:05:21

## npm run build --mode失效：构建模式中的故障排除

当你使用 npm run build --mode [模式] 命令时，你期望得到与指定模式对应的构建结果，但是，你却遇到了一个问题：实际加载了 production 模式的变量，导致构建结果不符合预期。

### 原因分析

按照 Vue CLI 文档的指示，运行 vue-cli-service build --mode staging 应该会使用 .env、.env.staging 和 .env.staging.local 文件（如果存在）来构建一个处于 staging 模式的 production 应用程序。

然而，在你的情况下，production 模式的变量却加载了，而不是 staging 模式的变量，导致构建结果不符合预期。这种构建问题可能是由于以下原因造成的：

.env.staging 文件不存在或包含不正确的变量值。
命令中输入有误。
Vue CLI 缓存中的旧文件。
Node.js 版本不受支持。
Webpack 配置不正确。

### 解决方案

检查 .env 文件：

确保 .env.staging 文件存在并且包含正确的变量值。它应该有以下内容：

NODE_ENV=production
VUE_APP_ENV=staging

检查命令：

确保你输入的命令正确，包括 --mode 标志。例如，对于 staging 模式，命令应该是：

npm run build --mode staging

重启项目：

关闭并重新启动项目可以解决此类问题。这将重新加载所有 .env 文件。

检查构建配置：

在 package.json 文件中，确保构建命令配置正确。它应该类似于：

"scripts": {
  "build": "vue-cli-service build --mode $VUE_APP_ENV"
}

更新 Vue CLI：

尝试更新 Vue CLI 到最新版本，因为问题可能是由过时的版本引起的。你可以使用以下命令：

npm install -g @vue/cli

清理缓存：

通过以下命令清理 Vue CLI 缓存：

vue-cli-service clear

检查 Node.js 版本：

确保你正在使用 Node.js 的受支持版本。Vue CLI 需要 Node.js 10 或更高版本。

检查 Webpack 配置：

在 vue.config.js 文件中，检查 Webpack 配置是否正确。它应该有以下内容：

const path = require("path");

module.exports = {
  configureWebpack: {
    // ...other configurations
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
  },
};

### 常见问题解答