vue 打包后如何修改接口地址？提供 config.js 进行配置_vue打包到服务上怎么修改vite.config.js-CSDN博客

本文介绍了在Vue项目打包后如何让用户方便地修改接口地址。通过创建config.js文件，用户可直接修改该文件进行配置，打包后的config.js文件仍存在于public文件夹下，不影响开发模式。

背景

在 vue 项目中，我们可以通过不同的环境，访问不同的服务器. 虽然可以使用环境的切换，但是在打包成html文件后，想对其进行修改就不行了。

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://localhost:8888';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.xxx.com';
}

需求，给用户提供，可以随时修改接口地址的方法

解决方案

添加一个 config.js ，用户可以通过修改此文件，使用对接口地址的配置

具体操作步骤：

1. 创建 config.js 文件

首先我们在public文件下建立一个js文件，就叫config.js吧，内容为

window.g = {
  AXIOS_TIMEOUT: 10000,
  ApiUrl: 'http://10.65.14.98:52333/api' // 配置服务器地址,
}

2. 引用 config.js 文件

接下来我们只需要在public文件夹下的index.html这个入口文件里引入该文件（注意路径就ok）

<script type="text/javascript" src="/public/config.js"></script>

3. 使用 config.js 中的值

可以在封装 axios 的代码中，设置 baseUrl 时，直接使用 config.js 中配置的值。代码如下：
注意看第三行

import axios from 'axios'

var baseURLStr = window.g.ApiUrl
console.log(baseURLStr)   //baseURLStr 这个可以打印出你的地址，就代表成功了
export function request(config) {

  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: baseURLStr,//api的base
    timeout: 200000
  }) 

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    method:'GET'
    return config
  }, err => {
    console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}