说明

image.png

image.png

1、手动修改

image.png
比如我设置axios请求后端的地址base_url,
开发的时候是我本机的地址127.0.0.1,
要换成给其他成员测试时,我要调成内网服务器的地址 192.168.0.xx,手动设置。
打包生产环境时,要改成后端地址。
image.png
手动修改的问题在于比较麻烦,而且手动修改很容易忘记,比如打包生产环境,打包完部署完才发现是测试服务器的地址(很容易发生)。

2、process.env.NODE_ENV的值进行区分(用的多)

webpack 、vue cli,可以通过一个全局的变量 process.env.NODE_ENV 来区分,在不同环境下运行,这个变量就是不同的值,如下图:
image.png
然后通过if判断
image.png

3、编写不同的环境变量配置文件

vue cli 和 vite 都支持这种方式

定义

(1)在项目中创建 .env.xxx 文件(名字是固定的)
.env :所有环境下都会读取里面的变量
.env.development :开发环境下才会读取里面的变量
.env.production:生产环境(正式上线)下才会读取里面的变量
.env.test:测试环境下才会读取里面的变量(单元测试、端对端测试)
image.png

(2)3个文件中,分别配置不同的变量
image.png
vue cli下,只会读取 VUEAPP开头的变量,如上
vite 下,只会读取 VITE_ 开头的变量 ,如 VITE_AAA = 123

使用变量

  1. //格式为:process.env.环境变量名
  2. console.log(process.env.VUE_APP_BASE_NAME); //codewyh,这种是自己在特定的环境文件中定义的环境变量