环境变量和模式

vite环境变量

Vite可以通过import.meta.env.xxx来暴露环境变量。

这里记录一下在这个项目中使用到的环境变量。在项目根目录下可以创建.env.xxx的文件，这个文件写了一些环境变量，在不同的情况下可以通过加载不同的文件来获取其中的环境变量。

上面表示了两个不同的模式，.env.build表示生产模式，.env.dev表示开发模式，然后在package.json中用--mode xx来表示不同的模式。其中xx要和.env.xx一致。

这里使用不同的模式是因为这个项目在开发模式下使用的ip地址是自己电脑上的http://localhost:8080/，而在生产模式下使用的是服务器的ip地址，可以通过这种方式替换掉ip地址。

.env.build文件：

# 配置环境变量，用VITE_开头。要在package.josn添加对应配置。这是里是线上的路径，在其他地方import.meta.env.VITE_WEB_DOMAIN使用
VITE_WEB_DOMAIN=http://175.178.147.180:6060/

.env.dev文件：

VITE_WEB_DOMAIN=http://localhost:8080/

这些文件一般都是写一些环境变量，**以VITE_开头，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。**由此我们可以在项目中通过import.meta.env.VITE_WEB_DOMAIN来使用这个环境变量，你可以在任何JS文件中使用。

当使用npm run dev命令VITE_WEB_DOMAIN会自动切换为http://localhost:8080/

当使用npm run build打包VITE_WEB_DOMAIN会自动切换为http://175.178.147.180:6060/

以下是使用console.log(import.meta.env)打印出来的

• DEV:true表示是在开发模式
• MODE:"dev"与package.json中的--mode dev对应
• PROD:false表示不是生产模式
• VITE_WEB_DOMAIN:"http://localhost:8080/"是我们自己定义的环境变量

vue环境变量

在使用vueCli创建项目，是通过process.env.NODE_ENV来判断项目处于什么环境下。

同样在根目录下创建两个文件，是以.env.xxx的形式，xxx可以是任何名字，只要和package.json中的--mode xxx相同即可。

然后在package.json文件中配置，这样你使用npm run serve命令就会加载.env.serve文件，可以拿到其中的变量。

.env.serve文件：VUE_APP是固定的前缀

NODE_ENV = 'development'
VUE_APP_URL="http://localhost:3001"

.env.prod文件：

NODE_ENV = 'production'
VUE_APP_URL="http://175.178.147.180:3001"

这样可以通过process.env.VUE_APP_URL拿到其中的变量。

在axios中的baseURL可以设置为process.env.VUE_APP_URL，项目在开发环境下是http://localhost:3001地址，在生产环境下是服务器地址http://175.178.147.180:3001。