vue4多环境变量配置

素颜马尾好姑娘i 2023-10-11 14:26 22阅读 0赞

通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境

只有以 VUE\_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE\_APP\_BASE\_API 访问

NODE\_ENV 和 BASE\_URL 是两个特殊变量，在代码中始终可用

配置

在项目根目录中新建.env, .env.production, .env.analyz 等文件 env的后缀为配备的变量名称

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

*  .env

serve 默认的本地开发环境配置

NODE_ENV = "development"
    
    BASE_URL = "./"
    
    VUE_APP_PUBLIC_PATH = "./"
    
    VUE_APP_API = "https://test.staven630.com/api"复制代码

.env.development：

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

比如执行npm run serve命令，会自动加载.env.development文件

启动项目：npm run serve

可见NODE\_ENV被改为了development，覆盖掉了.env中的全局属性

.env中的全局属性NODE\_ENV、VUE\_APP\_URL被覆盖，

.env中的全局属性VUE\_APP\_PREVIEW、VUE\_APP\_DEFAULT\_PARAM被保留

*  .env.production

build 默认的环境配置（正式服务器）

NODE_ENV = "production"
    
    BASE_URL = "https://prod.staven630.com/"
    
    VUE_APP_PUBLIC_PATH = "https://prod.oss.com/staven-blog"
    
    VUE_APP_API = "https://prod.staven630.com/api"
    
      
    
    ACCESS_KEY_ID = "xxxxxxxxxxxxx"
    
    ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"
    
    REGION = "oss-cn-hangzhou"
    
    BUCKET = "staven-prod"
    
    PREFIX = "staven-blog"复制代码

*  .env.crm

自定义 build 环境配置（预发服务器）

NODE_ENV = "production"
    
    BASE_URL = "https://crm.staven630.com/"
    
    VUE_APP_PUBLIC_PATH = "https://crm.oss.com/staven-blog"
    
    VUE_APP_API = "https://crm.staven630.com/api"
    
      
    
    ACCESS_KEY_ID = "xxxxxxxxxxxxx"
    
    ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"
    
    REGION = "oss-cn-hangzhou"
    
    BUCKET = "staven-crm"
    
    PREFIX = "staven-blog"
    
      
    
    IS_ANALYZE = true;复制代码

修改 package.json

"scripts": {
    
    "build": "vue-cli-service build",
    
    "crm": "vue-cli-service build --mode crm"
    
    }复制代码

使用环境变量

<template>
    
    <div class="home">
    
    
    
    API: {
       { api }}
    
    </div>
    
    </template>
    
      
    
    <script>
    
    export default {
    
    name: "home",
    
    data() {
    
    return {
    
    api: process.env.VUE_APP_API
    
    };
    
    },
    
    mounted() {
    
    // js代码中使用环境变量
    
    console.log("BASE_URL: ", process.env.BASE_URL);
    
    console.log("VUE_APP_API: ", process.env.VUE_APP_API);
    
    }
    
    };
    
    </script>

通过不同命令行切换不同环境api等信息，

例如： npm run dev 调用本地环境api

npm run test 调用测试环境api

npm run build 调用线上环境api

（1）先在package.json文件中添加：

"test": "vue-cli-service build --mode test"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70][]

（2）在项目目录下建立 .env文件和.env.test文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 1][]

.env文件

1.  `NODE_ENV = 'production'`
2.  `VUE_APP_FLAG = 'pro'`

![20181217134503557.png][]

.env.test文件（outputDir：打包时的输出目录名字，若需默认输出到dist目录，则可不写该变量）

1.  `NODE_ENV = 'production'`
2.  `VUE_APP_FLAG = 'test'`
3.  `outputDir = test`

![20181217134617553.png][]

在vue.config.js文件中添加：

outputDir: process.env.outputDir,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 2][]

（3）在main.js文件中配置api变量

if (process.env.NODE_ENV === 'production') {
        /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
        if (process.env.VUE_APP_FLAG === 'pro') {
            //production 生产环境
            axios.defaults.baseURL = 'http://api.xinggeyun.com';
     
        } else {
            //test 测试环境
            axios.defaults.baseURL = 'http://192.168.0.152:8102';
     
        }
    } else {
        //dev 开发环境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 3][]

npm run test后，即可在目录文件中看到test文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 5][]

在html中  
<script src="<%= process.env.VUE\_APP\_URL %>"></script>

.env \# 在所有的环境中被载入  
.env.local \# 在所有的环境中被载入，但会被 git 忽略  
.env.\[mode\] \# 只在指定的模式中被载入  
.env.\[mode\].local \# 只在指定的模式中被载入，但会被 git 忽略

环境加载属性

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用；

在构建过程中，process.env.VUE\_APP\_SECRET 将会被相应的值所取代。在 VUE\_APP\_SECRET=secret 的情况下，它会被替换为 "secret"。

除了 VUE\_APP\_\* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

NODE\_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。  
BASE\_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。  
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

提示

你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE\_APP\_ 前缀开头。这可以用于版本信息:

process.env.VUE\_APP\_VERSION = require('./package.json').version

module.exports = \{  
// config  
\}

只在本地有效的变量  
有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。  
https://cli.vuejs.org/zh/guide/mode-and-env.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181217115535166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190730141326679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1,size_16,color_FFFFFF,t_70
[20181217134503557.png]: https://img-blog.csdnimg.cn/20181217134503557.png
[20181217134617553.png]: https://img-blog.csdnimg.cn/20181217134617553.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181217135450151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181217143953505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20181217145727534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190730141416324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDU1Njc1,size_16,color_FFFFFF,t_70