环境变量和模式

0 介绍

在npm下实际上vue-cli 启动的时候，已经确定了环境变量与模式，这样方便代码的构建

打开package.json后

我们这边描述的环境就在scripts中

1 模式

是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入

bash

"dev-build": "vue-cli-service build --mode development",

2 调用

那么我们在代码里面怎么调用呢、和他的应用场景呢

javascript

process.env.NODE_ENV

这样我们就可以获取他的环境变量

3 场景

我们在src目录下新建一个config 构建一个env.js的目录

javascript

let baseUrl = '';

const env = process.env
if (env.NODE_ENV == 'development') {
    baseUrl = `http://192.168.1.1`; // 开发环境地址
} else if (env.NODE_ENV == 'production') {
    baseUrl = `http://192.168.1.2`; //生产环境地址
} else if (env.NODE_ENV == 'test') {
    baseUrl = `http://192.168.1.3`; //测试环境地址
}

export {
    baseUrl,
    env
}

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

那么这样我们就可以直接使用不同环境下的

环境变量和模式 #

0 介绍 #

1 模式 #

2 调用 #

3 场景 #

环境变量和模式

0 介绍

1 模式

2 调用

3 场景