vue 配置环境变量
·
为了满足不同环境下使用不同参数，我们需要通过.env文件来实现。
1、创建.env文件
在项目根目录下穿件不同环境的.env文件。
例如 ：.env(所有环境都可以使用)
.env.development（开发环境）,
.env.test(测试环境),
.env.production（生产环境）
2、添加内容并使用
1、Vite与Vue-cli构建的项目的区别
| 构建工具 | 环境变量前缀 | 获取方式 |
|---|---|---|
| Vite | VITE_ | import.meta.env |
| Vue CLI | VUE_APP_ | process.env |
例如.env.development内容：
Vite：
内容：
NODE_ENV=development
VUE_APP_API_URL=http://192.168.xx.x:xxxx/
使用：
console.log("环境变量",process.env);
console.log('当前 API 地址:', process.env.VUE_APP_API_URL);
Vue-cli：
内容：
NODE_ENV=development
VITE_API_URL=http://192.168.xx.x:xxxx/
使用：
console.log("环境变量",import.meta.env);
console.log('当前 API 地址:', import.meta.env.VITE_APP_API_URL);
注：除了NODE_ENV 外其他参数前缀错误会导致获取失败
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)