VUE 配置环境变量

vue 环境变量配置

参考文章@一颗小芹菜的日常
参考文章2@sunshineG

env.production 和 env.development 文件

env.production 文件是生产环境下的文件.
env.development 文件时开发环境下的文件.

如果没有创建上面两个文件,默认

• npm run serve 运行项目时, process.env.NODE_ENV 的默认值是 development;
• npm run build 运行项目时, process.env.NODE_ENV 的默认值是 production;

 "scripts": {
    "serve": "vue-cli-service serve", // 默认 development 开发环境
    "build": "vue-cli-service build",   // 默认 production 生产环境
    "lint": "vue-cli-service lint"
  },

1
2
3
4
5
6
7

验证(process.env.NODE_ENV)环境：

（1） vue.config.js 文件中打印输入 process.env.NODE_ENV
（2）分别运行 npm run serve 和 npm run build ,然后在命令窗口中(或终端)查看打开结果

通过 .env 文件来配置环境变量

1. 项目运行环境不同,用的环境变量就会不同.

• production (生产环境下):项目会使用 .env.production 文件中的环境变量
• development (开发环境下):项目会使用 .env.development 文件中的环境变量

注意:.env.production 和 .env.development 文件与 package.json文件同级

验证通过.env 配置的环境变量

1. 在 package.json 同级文件夹下,生成.env.production 文件和.env.development 文件
2. 在创建的文件夹中分别创建一个环境变量 VUE_APP_BASE_URL
3. 然后通过不同的 命令运行项目,查看环境变量 VUE_APP_BASE_URL 的输出值
   
   
   注意:vue项目中的环境变量 都要以 VUE_APP_ 开头

// .env.production文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/prod'
// .env.development文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/dev'
1
2
3
4

自定义 .env 文件

1. 在 package.json 同级文件夹下,生成以 .env.名字 命名的文件
2. 在 生成的 .env.名字 的文件中配置环境变量
3. 通过 process.env.配置的环境变量,来验证不同的环境中,环境变量的变化

注意:

• 1. 自定义 .env.变量 文件时, package.json 文件中 --mode 变量,变量需要一致
     • 

• 2. serve:名字 ,这个名字可以随便起
     • 

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:prod": "vue-cli-service serve --mode prod",
    "serve:test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

1
2
3
4
5
6
7
8
9
10
11
12

// .env.dev 文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/dev'
// .env.prod 文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/prod'
// .env.test 文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/test'
1
2
3
4
5
6

最后的方法

1. 在不同的.env 文件中,配置环境变量 NODE_ENV ,然后可以通过 process.env.NODE_ENV 来获取 NODE_ENV 这个环境变量
2. 在一个统一的文件中,通过判断 NODE_ENV 的值,来配置不同的 url

// .env.dev 文件
NODE_ENV = 'dev'
// .env.prod 文件
NODE_ENV = 'prod'
// .env.test 文件
NODE_ENV = 'test'

// server.js

const dev = process.env
let baseURL = ''

if (dev.NODE_ENV == 'dev') baseURL = 'https://192.168.212.1:8080/dev'
if (dev.NODE_ENV == 'prod') baseURL = 'https://192.168.212.1:8080/prod'
if (dev.NODE_ENV == 'test') baseURL = 'https://192.168.212.1:8080/test'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

vue2.0 在页面中使用process获取全局路径的时候 报错 process is not defined

解决办法

1. 在data中声明一个变量用来接收 process.env.变量
2. 在 created 或 mounted 生命周期函数中对data中声明的变量进行赋值。
3. 在需要用的环境变量的地方 使用赋值后 data 中的变量。

参考文章@飞尽堂前燕

template 部分：
  <iframe class="iframeTag" :src="VUE_APP_TEST_URL"></iframe>

javascript 部分：
created() {
    this.VUE_APP_TEST_URL = process.env.VUE_APP_TEST_URL
    console.log(process.env.VUE_APP_TEST_URL, 'NODE_ENV')
  },

data() {
    return {
      VUE_APP_TEST_URL: '',
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14