可以按照以下步骤进行操作:
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`属性即可。同时,由于配置文件不会被压缩,因此在编译打包后也可以轻松地修改配置文件。
标签:Vue,读取,配置文件,接口,js,Vue2,全局变量,config From: https://www.cnblogs.com/gaosj20210301/p/17388508.html