项目环境变量配置2/3

项目根目录分别添加开发、生产和测试环境的文件!
.env.development
.env.production
.env.test

.env.development文件

VITE_APP_DEV = "dev-api"
VITE_APP_URL = "http://192.168.0.0.1/api" 

.env.production文件

VUE_APP_ENV="production"
VUE_APP_API_URL="http://localhost:3000"

.env.test文件

VUE_APP_ENV="test"
VUE_APP_API_URL="http://localhost:9000"

配置运行命令

配置运行命令:package,json
"scripts":
"dev":"vite --open",
"build:test":"vue-tsc &vite build --mode test",
"build:pro":"vue-tsc &vite build --mode production",
"preview":"vite preview"

在页面读取方法

使用vue cli创建的vue项目我们获取环境变量的方式如下
console.log(process.env..VITE_API_URL)

vite服务器的读取
console.log( import.meta.env.VITE_API_URL)

然后在封装的axios里面进行配置路径接口 
PS 通过打包运行显示定义的接口

你可能感兴趣的:(#,Vue2,#,Vue3,前端)