vue根据环境动态打包BASE_API

项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的，为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的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/'
}

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

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": {
    
    },
}

在命令框运行命令即可，比如： npm run build:test 就可切到test环境的地址了

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

vue根据环境动态打包BASE_API

猜你喜欢