请问如何实现在vue打包后可以修改接口地址？

Question

就是打包后有一个单独的配置文件，修改这个配置文件的值就可以修改
axios访问地址。
网上挺多方法都试过，都是创建一个js文件，在index.html中导入

window.g = {
    baseurl: "xxx"
}

const g = {
    baseurl: "xxx"
}

export default  {
    baseurl: "xxx"
}

上面这三种都能获取到配置，但是要么打包后修改配置文件没效果，要么刷新页面就提示XX属性没定义，比如window.g.baseurl，从页面路由过去是正确的，刷新就提示baseurl没定义。
还有下面这种，创建一个json文件然后引入

var URL = require('../public/static/config.json');

也能获取到配置，但是打包后修改配置文件没效果。
我是想设置axios的baseURL，比如下面这样

axios.defaults.baseURL="xxx"

我是搞后端的，这个问题我搞了两天，实在搞不定了。。。
我的vue版本是@vue/cli 4.4.6

请问有没有比较详细的博客或者示例，跪谢啊。

Answer 1

终于搜到一篇文章搞定了

1. 在public文件夹下创建一个json文件，如config.json。放public文件夹下是vuecli3.0+的路径，vuecli2.0是放在根目录static文件夹下，网上很多就是基于vuecli2.0的。

{
    "base_url"="xxx"
}

1. main.js中使用axios引入json，这个"/config.json"路径是以public为根目录访问，如果放在pulibc/config/文件夹下，就是"/config/config.json"。这个路径网上大多没有解释，对我这个不了解的人是个大坑。

import axios from 'axios'
axios.get('/config.json').then((res) => {
    axios.defaults.baseURL = res.data.BASE_URL
  })

Answer 2

可以看下vue-cli的文档, 模式和环境变量篇 https://cli.vuejs.org/zh/guid...

总之是可以新建不同的环境配置文件, 比如可以新建这样一套文件
测试环境: .env.testenv

NODE_ENV = 'test'
VUE_APP_ENV = 'test'
VUE_BASE_REQUEST_URL='XXX';

线上环境: .env.prodenv

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
VUE_BASE_REQUEST_URL='XXX'

然后打包的命令修改一下就可以了。
"build-test": "vue-cli-service build --mode testenv",
"build-prod": "vue-cli-service build --mode prodenv",

在设置axios的时候就可以这样使用

axios.defaults.baseURL=process.env.VUE_APP_ENV

Answer 3

我有做相关配置，试过，可行，打包过后只需要在打包好的文件static/config.js里面去该url地址就可以了。我的配置如下：
在static下面创建一个config.js 文件，内容如下：

window.global_config = {
    BASE_URL: 'http://ip:port/api/v1' //配置所有axios api 全局地址
  }

index.html 引入该js

 <script src="./static/config.js"></script>

axios下配置

const request = axios.create({
  // baseURL: process.env.BASE_API, // api 的 base_url 注释改行，修改为下面的
  baseURL: global_config.BASE_URL, // api 配置路径  直接修改static 下的config.js
  timeout: 50000 // request timeout
})

Answer 4

我一般是这么做的

// 在index.html通过判断是否开发模式，来设定一个全局配置
window.developer = '<%= process.env.NODE_ENV %>' === 'development' ? {
  zhangsan: 'http://www.baidu.com',
  lisi: 'https://www.google.com'
} : {
  zhangsan: '',
  lisi: ''
}