Vue项目多环境访问地址配置

最新推荐文章于 2025-05-24 10:27:41 发布

原创最新推荐文章于 2025-05-24 10:27:41 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

21 篇文章

订阅专栏

博客介绍了在Vue项目中添加环境变量和多环境地址的方法，包括在src目录下新建文件配置开发、测试、生产环境地址，自定义环境变量，还说明了在封装请求中添加地址配置，如在src目录下新建axios文件夹并配置文件内容，以及配置相关命令。

添加环境变量和多环境地址

src目录下新建const.js文件,并添加类似下面的配置

const env = {
  development: {
    API_BASE_ORIGIN: '/base',
    API_TEST_ORIGIN: '/test'
  },
  test: {
    API_BASE_ORIGIN: 'https://xx.xx.xx1',
    API_TEST_ORIGIN: 'https://xx.xx.xxx1'
  }
  production: {
    API_BASE_ORIGIN: 'https://xx.xx.xxx',
    API_TEST_ORIGIN: 'https://xx.xx.xx'
  }
}
export default env[process.env.VUE_APP_BUILD_ENV]

development 开发环境地址配置
test 测试环境地址配置
production 生产环境地址配置
VUE_APP_BUILD_ENV 自定义环境变量（必须以VUE_APP_前缀开头）

封装请求中添加地址配置
src目录下新建axios文件夹，axios目录下新建index.js，文件内容如下

import axios from 'axios'
import envConst from '../const'
//请求拦截器
axios.interceptors.request.use(
  function (config) {
    //按照config.url判断具体请求地址
    if(config.url.split('/')[1].match(/(test1|test2)/)) {
       config.baseURL = envConst.API_TEST_ORIGIN
    } else {
       config.baseURL = envConst.API_BASE_ORIGIN
    }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
//响应拦截器
axios.interceptors.response.use(
   function (config) {
     //...
   })
)
export default axios

绑定自定义axios到$axios上

//按照地址引入axios请求
import axios from '../axios'
Vue.prototype.$axios = axios

配置命令
package.json文件中添加如下命令

{
  //...
  scripts: {
    "serve": "cross-env VUE_APP_BUILD_ENV=development vue-cli-service serve --fix",
    "build-test": "cross-env VUE_APP_BUILD_ENV=test vue-cli-service build",
    "build": "cross-env VUE_APP_BUILD_ENV=production vue-cli-service build",
  }
  //...
}