vue.js - vue项目打包，怎么实现不同环境配置不同的配置呢？

Question

vue项目打包，怎么实现不同环境配置不同的配置呢？

例如：

// 在vue.config.js中设置了module.exports = {……    configureWebpack: config => {        if(process.env.NODE_ENV === 'production'){            ……        }else if(process.env.NODE_ENV === 'xxxx'){ // 自定义环境                    }    }}

打包命令 npm run xxxx

可以进入‘xxx’处配置，执行自定义配置

Answer 1

看情况应该是VueCLI创建的项目，可以在根目录下创建对应的 .env.xxx 环境变量文件。打开对应的环境变量文件在文件头上书写 NODE_ENV = xxx 就行了。
但是 NODE_ENV 变量一般会被 webpack 之类的工具所使用，如果设置的是自定义属性，可能会有问题。所以我的建议是另起一个变量名比如说 MY_PROJECT_ENV = xxx (可能需要 VUE_APP_ 前缀) 然后再在 vue.config.js 中使用。
然后启动项目的时候就可以直接用 npm run serve --mode xxx 来指定环境变量了。

模式和环境变量 | Vue CLI

Answer 2

在 Vue 项目中，你可以使用不同的环境变量来配置不同的打包设置。这些环境变量可以在 vue.config.js 文件中使用，就像你在示例中所做的那样。要设置和使用自定义环境，你可以遵循以下步骤：

1. 定义环境变量：
   在你的项目根目录下创建一个 .env 文件（如果还没有的话）。在这个文件中，你可以定义环境变量。例如，要定义一个名为 VUE_APP_CUSTOM_ENV 的环境变量，你可以在 .env 文件中添加以下行：

   VUE_APP_CUSTOM_ENV=custom

请注意，只有以 VUE_APP_ 开头的变量才会被 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

2. 修改 vue.config.js：
   在 vue.config.js 文件中，你可以根据环境变量来修改配置。例如，你可以检查 process.env.VUE_APP_CUSTOM_ENV 的值，然后基于这个值来应用不同的配置。

   module.exports = {  configureWebpack: config => {    if (process.env.NODE_ENV === 'production') {      // 生产环境配置    } else if (process.env.VUE_APP_CUSTOM_ENV === 'custom') {      // 自定义环境配置    }  }}

3. 创建自定义打包命令：
   要在 npm 中创建自定义的打包命令，你可以在 package.json 文件的 scripts 部分添加一个命令。例如，要创建一个名为 xxxx 的命令，你可以这样做：

   "scripts": {  "xxxx": "vue-cli-service build --mode custom"}

这里的 --mode 参数允许你指定一个除了 development 和 production 之外的模式。当使用这个命令时，Vue CLI 会加载与这个模式相关的环境变量（例如，.env.custom）。

4. 创建环境文件：
   为了支持你的自定义环境，你需要创建一个与你的模式名称相对应的环境文件。在这个例子中，你需要创建一个 .env.custom 文件，并在其中定义你的环境变量。

   VUE_APP_SOME_VARIABLE=some-value-for-custom-env

当运行 npm run xxxx 命令时，Vue CLI 会自动加载 .env.custom 文件中的环境变量。

5. 运行自定义命令：
   现在，你可以通过运行 npm run xxxx 命令来触发你的自定义打包配置。这个命令会设置 NODE_ENV 为 custom，并且加载 .env.custom 文件中的环境变量。

请确保你的环境变量和文件名都符合 Vue CLI 的约定，这样它们才能被正确地加载和使用。如果你遵循这些步骤，你应该能够在不同的环境配置中使用不同的打包设置。