vue3 vite环境配置

253 阅读1分钟

直接入正题.....

1.先在根目录新建对应的环境配置文件,注意env会被其他环境运行时覆盖

image.png

2.在package.json下更改启动命令 :这里用test 和prod为例,注意名字记得对应上创建的文件名

image.png

3.以.env.prod为例 添加以下配置信息 (记得用VITE_开头)

线上环境

写入线上的服务器地址和代理名 VITE_BASE_URL = xxx.xxx.xx.xxx

VITE_APP_BASE_API = /api

image.png

4.配置vite.config里的代理 (如果像我这样写死的则不需要使用环境变量来判断,如果需要在这里使用import.meta.env则需要进行其他设置,这里不做说明。)

image.png

5.最后一步来到我们的接口配置文件

使用import.meta.env.VITE_APP_BASE_API来进行判断当前运行的环境,然后走对应的代理其他情况根据项目实际情况而定

image.png