项目环境变量配置2/3

小阳生煎

已于 2023-10-12 10:15:38 修改

阅读量69

点赞数

分类专栏： # Vue2 # Vue3 文章标签：前端

于 2023-10-07 15:24:44 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/133524379

版权

Vue2 同时被 2 个专栏收录

110 篇文章 4 订阅

订阅专栏

36 篇文章 0 订阅

订阅专栏

项目根目录分别添加开发、生产和测试环境的文件！
.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 通过打包运行显示定义的接口