1. 通过.env配置

.env:全局默认配置文件,任何环境都会加载

.env.sit:自定义环境配置,sit可更改为其他。例:.env.uat,.env.prod、

/** .env文件 */

NODE_ENV=production

VUE_APP_BUILD=test
/** .env.sit文件 */
# 后台服务
VUE_APP_SERVER = https://www.baidu.com
# 系统环境
VUE_APP_BUILD = sit
# 埋点开关
VUE_APP_DBP = true
# 图片地址
VUE_APP_BASEIMG = https://www.baidu.com:8771/sdoss

注意:自定义变量名必须以VUE_APP_开头。例:VUE_APP_BUILD

使用:通过process.env.xxxx去访问。例:process.env.VUE_APP_BUILD

提示:自定环境配置 > 全局默认配置文件,若两个文件存在相同变量名时,会优先使用自定义环境变量配置里面的变量名。例:若console.log(process.env.VUE_APP_BUILD)输出结果为sit

使用配置

 --mode test 表示执行.env.test文件

2. 导出配置文件

暴露config配置文件,在自动构建平台上通过脚本更改接口地址,指定运行环境

需要暴露的文件路径:public/static/config.js

window.BASICS_CONFIG = {
  //接口父路径
  VUE_APP_API_URL: 'https://www.baidu',
  //图片资源地址
  VUE_APP_IMG_URL: '',
  //环境变量
  VUE_APP_ENV: 'uat'
}

页面引用文件路径:src/config/index.js

/** 若配置了window.BASICS_CONFIG优先使用里面变量否则使用.env的环境变量 */
export const API_BASE_URL = window.BASICS_CONFIG.VUE_APP_API_URL?window.BASICS_CONFIG.VUE_APP_API_URL:process.env.VUE_APP_VUE_APP_API_URL

export const API_BASE_URL = window.BASICS_CONFIG.VUE_APP_IMG_URL?window.BASICS_CONFIG.VUE_APP_IMG_URL:process.env.VUE_APP_IMG_URL

export const API_BASE_URL = window.BASICS_CONFIG.VUE_APP_ENV?window.BASICS_CONFIG.VUE_APP_ENV:process.env.VUE_VUE_APP_ENV

在需要的页面引入src/config/index.js文件即可使用

方式1.2可配合使用

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐