vue项目按环境类型设置不同的IP地址等配置信息（附process.env常见问题）

妖狐艹你老母 2024-03-02 08:23 12阅读 0赞

#### **前言** ####

前端项目开发中，通常有如下几种环境：开发环境（development）、测试环境（test）、生产环境（production），当然有的项目服务器多，可能还会有通用环境和预投产环境等等，每种环境对应的前后端通讯地址肯定不一样，还有其他的路径等配置信息也是不一样的，如何在不修改代码的前提下让不同的环境获取的配置参数都不一样呢（使用 Nginx 的不在此讨论范围）？这就是要讲的多个环境变量的配置问题，本文只讲其中一种比较好用的方法：通过创建.env文件的形式获取不同环境的配置参数。

#### **步骤1：** ####

在项目根目录上创建名称为 .env.xxx 的文件（一定要以 .env. 开头），xxx 表示环境名称，如开发环境就写 .env.development，测试环境就写 .env.test，生产环境就写 .env.production，xxx 可自定义，但一定要和后面要讲的 package.json 文件的名称对应上。

![0b2febe2e7c443dc87f05e14db3f578d.png][]**图1**

#### **步骤2：** ####

在每个 .env.xxx 文件中填写好配置信息，NODE\_ENV 属性值实际上可写可不写，如果写了需要和 xxx 同名，比如文件名为 .env.development，那么该文件里就写 NODE\_ENV = 'development'，outputDir 这个字段表示打包名称，根据自身需求可写可不写，VUE\_APP\_URL 表示前后端通讯的 IP 地址，如果还有其他属性要添加，直接以 VUE\_APP\_XXX 名称去添加字段，注意一定要以 VUE\_APP\_ 开头，否则访问不到。

//.env.development文件里的配置信息
    NODE_ENV = 'development'
    outputDir = 'demo/development'
    #标题
    VUE_APP_TITLE = 'development'
    #访问地址
    VUE_APP_URL = 'http://127.0.0.1:8088'  //开发环境后台本地地址
    
    //.env.test文件里的配置信息
    NODE_ENV = 'test'
    outputDir = 'demo/test'
    #标题
    VUE_APP_TITLE = 'test'
    #访问地址
    VUE_APP_URL = 'http://15.30.120.17:8088'   //测试环境后台地址
    
    //.env.production文件里的配置信息
    NODE_ENV = 'production'
    outputDir = 'demo/production'
    #标题
    VUE_APP_TITLE = 'production'
    #访问地址
    VUE_APP_URL = 'http://15.68.75.33:8088'  //生产环境后台地址

#### **步骤3：** ####

打开 package.json 文件，在 scripts 对象中填写启动项目或者打包项目的命令脚本，serve 默认对应开发环境，build 默认对应打包环境，它可以设置多种模式对应多种环境，--mode XXX 中的XXX 一定要和 .env.XXX 文件名中的 XXX 一样才能正确启动项目；如输入 npm run serve 则代表启动开发环境，输入 npm run test 则代表打包测试环境，输入 npm run prod 则代表打包生产环境，serve、test、prod 这些启动名称可以自定义。

![5850fab6cf3244b68e48ac9ec00efce0.png][]**图2**

**步骤4：**

访问不同环境的变量信息，在任意一个 vue 文件或者 js 文件中直接使用代码process.env.variableName 来访问，variableName 表示要访问的变量名，比如要拿到前后端通讯的地址，则输入 url = process.env.VUE\_APP\_URL 即可，如果是用 npm run serve 启动项目的，那么拿到的url的值就为 [http://127.0.0.1:8088][http_127.0.0.1_8088]，如果是用 npm run test 执行项目的，那么其值就为[http://15.30.120.17:8088][http_15.30.120.17_8088]，如果使用 npm run prod 执行项目的，那么其值就是[http://15.68.75.33:8088][http_15.68.75.33_8088]。

//执行npm run serve
    let url = process.env.VUE_APP_URL
    console.log("访问的后台地址为：", url)
    //结果为 http://127.0.0.1:8088
    
    //执行npm run test
    let url = process.env.VUE_APP_URL
    console.log("访问的后台地址为：", url)
    //结果为 http://15.30.120.17:8088
    
    //执行npm run prod
    let url = process.env.VUE_APP_URL
    console.log("访问的后台地址为：", url)
    //结果为 http://15.68.75.33:8088

当然有的项目组可能不这么去获取配置信息，而是自己写个判断语句去获取或修改其值，这也是可以的，但是要注意在 .env.xxx 文件中一定要正确地对 NODE\_ENV 赋值，其值务必与 .env.xxx文件的文件名 xxx 相一致，否则取值会错误：

var url
    if(process.env.NODE_ENV == 'development') {
        url = 'http://127.0.0.1:8088'
    }else if(process.env.NODE_ENV == 'test') {
        url = 'http://15.30.120.17:8088'
    }else if(process.env.NODE_ENV == 'production') {
        url = 'http://15.68.75.33:8088'
    }else {
        url = ''
    }

#### **常见问题：** ####

1、在根目录上创建了一个 .env.build 的文件，文件里配置了一个变量 VUE\_APP\_URL = 'http://15.162.37.66:8088'，打包命令输入 npm run build，在某个页面执行语句console.log(process.env.VUE\_APP\_URL) 打印出的结果不是 http://15.162.37.66:8088 而是 .env.production 文件中配置的[ http://15.68.75.33:8088][http_15.68.75.33_8088]，这是什么原因？

解析：见上面的图2，脚本配置中 'build' 配置的是 vue-cli-service build，注意这个配置后面没有写 --mode，也就是没有指定模式，那么 node 是会默认指定为配对 .env.production文件，也就是说 npm run build 默认打包生产环境，在本项目中 npm run build 是等同于 npm run prod 的，获取的值自然也就是 .env.production 文件中配置的 http://15.68.75.33:8088 ；不止 npm run build，其实 npm run serve 也是一样，如果后面没有指定模式，那么 node 默认为开发环境。总之创建vue 项目的时候会自动生成 "serve": "vue-cli-service serve"; "build": "vue-cli-service build" 两条脚本语句，默认（未指定模式）对应关系如下：

> npm run serve => 默认读取 .env.development 文件中的配置信息，不会读取.env.serve文件npm run build => 默认读取 .env.production 文件中的配置信息，不会读取 .env.build 文件

如果指定了模式（后面加了 --mode），那么对应关系如下：

> npm run xxx => 读取 .env.xxx 文件中的配置信息

[0b2febe2e7c443dc87f05e14db3f578d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/71c5f29ade1c4b028ec387025d9a6f4f.png
[5850fab6cf3244b68e48ac9ec00efce0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/9c65dda598024bc6b76aac065d92e2da.png
[http_127.0.0.1_8088]: http://127.0.0.1:8088
[http_15.30.120.17_8088]: http://15.30.120.17:8088
[http_15.68.75.33_8088]: http://15.68.75.33:8088