Vue2项目中，在编译打包后通过读取配置文件，任意修改接口地址

可以按照以下步骤进行操作：

 

1. 在项目根目录下创建一个名为`config`的文件夹，并在该文件夹下创建一个名为`index.js`的文件，用来存放配置文件，如：

 

```javascript

module.exports = {

  apiRoot: 'http://api.example.com'

}

```

 

这里定义了一个`apiRoot`属性，用来存放接口地址。

 

2. 在代码中读取配置文件，并将配置文件中的属性设置为全局变量。可以在`main.js`文件中引入配置文件，然后在Vue实例中将配置文件中的属性设置为全局变量，如：

 

```javascript

// main.js

import Vue from 'vue'

import App from './App.vue'

import config from '../config'

 

Vue.config.productionTip = false

 

Vue.prototype.$config = config // 将配置文件设置为全局变量

 

new Vue({

  render: h => h(App),

}).$mount('#app')

```

 

这里使用`Vue.prototype.$config`来将配置文件设置为全局变量，以便在整个Vue应用程序中都可以使用。

 

3. 在代码中使用全局变量来配置接口地址，如：

 

```javascript

// 在api.js中

import axios from 'axios'

 

const api = axios.create({

  baseURL: Vue.prototype.$config.apiRoot // 读取配置文件中的接口地址

})

 

export default api

```

 

这样，在打包后任意修改接口地址时，只需要修改`config/index.js`文件中的`apiRoot`属性即可。同时，由于配置文件不会被压缩，因此在编译打包后也可以轻松地修改配置文件。