前端切换不同环境之process

Process

前端项目在开发中往往分为多个环境，例如dev、test、prod等。
我们经常会遇到测试环境和生产环境的后端请求地址不一样，每次手动修改太麻烦。
于是process 就诞生了，当前前端往往可以使用process区分打包指向的后端地址从而达到不同环境访问不同地址的目的。

Cross-env

cross-env可以解决不同环境设置不同环境变量的问题。根据配置的参数访问不同的配置文件以达到切换环境的效果。

案例

多说无益，接下来我们结合案例分析一下
首先你要安装corss-env和process这两个依赖，过于简单直接省略。
其次在本地代码根目录下创建.env开头文件
如.env.production、.env.development

文件内代码如下

VITE_NODE_ENV = 'dev' 
VITE_API_URL = 'http://DEV' 

先别管 先这样写。

接下来在pack.json文件内的命令内添加如下命令

"dev": "cross-env VITE_NODE_ENV=dev vite --mode production",

cross-env代表当前项目的环境变量是什么 ，可以设置为dev 、prod
–mode 则代表取哪个文件的配置 #划重点# mode后跟随的是文件名称，如下图的development指向的就是.env.development文件。

如下图

聪明的牛马已经发现问题了，为什么dev和build写的不一样，少了VITE_NODE_ENV这一段。
其实这个可以写在.env文件内，也可以写在命令内，命令行优先级更高。
那么配置写好了 代码里面怎么使用呢。
注意这里面有个大坑，使用Vite和Webpack构建时有细微的差别

Vite构建时 定义.env文件 使用VITE_开头定义变量

VITE_NODE_ENV = 'dev' 
VITE_API_URL = 'http://DEV' 

Vite项目获取值

 console.log('测试',import.meta.env.VITE_NODE_ENV,import.meta.env.VITE_API_URL)
 // 输出 测试，dev，http://DEV

Webpack构建时 定义.env文件 使用VUE_APP_开头定义变量

VUE_APP_NODE_ENV = 'dev' 
VUE_APP_API_URL = 'http://DEV' 

使用webpack构建项目则用一下方法获取值

 console.log(process.env.VUE_APP_NODE_ENV,process.env.VUE_APP_API_URL)
 // 输出 dev，http://DEV