Vue多环境配置

小强崽

已于 2022-08-18 01:17:58 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

于 2021-07-17 01:58:35 首次发布

本文链接：https://blog.csdn.net/wdq875667601/article/details/118840590

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Vue项目中实现多环境配置的方法，通过不同的环境变量设置来区分开发、测试及生产环境，并提供了具体的配置文件及启动命令。此外，还介绍了如何在项目中引用这些配置。

一、新建配置

# 开发环境
.env.dev
# 集成测试
.env.sit
# 验收测试
.env.uat
# 生产环境
.env.prod

.env.dev

ENV = 'dev'

VUE_APP_SERVER_API = 'http://localhost:8080/api/pavilion'

.env.sit

ENV = 'sit'

VUE_APP_SERVER_API = 'http://192.168.8.246:8080/api/pavilion'

.env.uat

ENV = 'uat'

VUE_APP_SERVER_API = 'https://www.xiaoqiangzai.xyz/api/pavilion'

.env.prod

ENV = 'prod'

VUE_APP_SERVER_API = 'https://www.wuduoqiang.com/api/pavilion'

二、配置环境

在package.json文件新增配置

"dev": "vue-cli-service serve --port 80 --mode dev",
"sit": "vue-cli-service serve --port 80 --mode sit",
"uat": "vue-cli-service serve --port 80 --mode uat",
"prod": "vue-cli-service serve --port 80 --mode prod",
"build:dev": "vue-cli-service build --mode dev",
"build:sit": "vue-cli-service build --mode sit",
"build:uat": "vue-cli-service build --mode uat",
"build:prod": "vue-cli-service build --mode prod",

三、启动命令

# 启动开发环境
npm run dev
# 启动集成测试
npm run sit
# 启动验收测试
npm run uat
# 启动生产环境
npm run prod

四、打包命令

# 打包开发环境
npm run build:dev
# 打包集成测试
npm run build:sit
# 打包验收测试
npm run build:uat
# 打包生产环境
npm run build:prod

五、使用步骤

新建一个GlobalConstant.vue文件

# 添加配置
SERVER_API: process.env.VUE_APP_SERVER_API

在main.js导入

import GlobalConstant from './components/common/global/GlobalConstant.vue'
Vue.prototype.GLOBAL = GlobalConstant;

在代码中使用

this.GLOBAL.SERVER_API

启动开发环境

npm run dev

启动测试环境

npm run uat

作者(Author)：小强崽
来源(Source)：https://www.wuduoqiang.com/archives/Vue多环境配置
协议(License)：署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
版权(Copyright)：商业转载请联系作者获得授权，非商业转载请注明出处。 For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.