项目需要在不同环境下运行,如开发,测试,生产等,但是每个环境下请求的服务地址不是确定的, 为了避免频繁切换请求的地址以及相关的配置容易出错的问题,新的vue-cli脚手架没有直接提供配置选项,怎么办呢? 通用的是以下方式实现环境baseapi配置后自动切换

一、建立.env系列文件
首先我们在根目录新建3个文件,
分别为.env.development,.env.test,.env.production

.env.development 开发环境
.env.test 测试环境
.env.production 模式用于build项目,线上环境

.env.development文件内容如下:

# 页面标题
VUE_APP_TITLE = 'TEST PROJECT'

#环境信息
NODE_ENV = 'development'
#开发环境的URL
VUE_APP_SERVER_URL = 'http://10.20.30.40:8081'
#配置代理info
VUE_APP_BASE_API = 'http://10.10.10.14:8888/'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

这里我们要配置的就是VUE_APP_BASE_API属性,其他地方用到时直接用process.env.VUE_APP_BASE_API获取即可,如:

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
})

就像下面这种,就是.env文件只需要声明环境,不需要配置VUE_APP_BASE_API属性了,因为它变成了一个全局的变量,可以在任何地方使用,它会根据环境自动去赋值baseURL了

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://10.11.12.13:8081/'
} else if (process.env.NODE_ENV === 'test') {
  axios.defaults.baseURL = 'http://10.20.30.40:8082/'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://10.21.32.43:8083/'
}

那配置好了,怎么在项目运行中使用呢,这里需要用到的就是运行命令了

  1. package.json中配置打包命令:
{
  "name": "",
  "version": "1.0.0",
  "description": "test project",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:test": "vue-cli-service build   --mode test",
    "build:prod": "vue-cli-service build   --mode production",
    //原来的"build": "vue-cli-service --mode build",
  },
  "dependencies": {},
}
  1. 在命令框运行命令即可,比如: npm run build:test 就可切到test环境的地址了

注意:package中的命令–mode是和第一步的的在项目根目录添加的文件.env文件名 “.env.test”和“.env.production”是保持一致的。

Logo

前往低代码交流专区

更多推荐