vue2脚手架,axios的baseURL如何通过单独的文件来管理
时间: 2024-03-10 20:46:10 浏览: 21
在Vue2脚手架中,我们可以通过创建一个单独的配置文件来管理axios的baseURL。以下是具体步骤:
1. 在Vue项目的根目录下创建一个`config.js`文件,用于存放axios的配置信息。例如:
```javascript
// config.js
export default {
baseURL: 'http://localhost:3000/api',
// 其他配置信息
}
```
在`config.js`文件中,我们可以定义axios的任意配置信息,例如baseURL、超时时间、请求头等。
2. 在Vue项目的代码中,通过导入`config.js`文件来获取axios的配置信息。例如:
```javascript
import axios from 'axios'
import config from './config'
axios.defaults.baseURL = config.baseURL
axios.get('/users')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
```
在以上代码中,我们通过导入`config.js`文件,并将其中的`baseURL`赋值给axios的默认`baseURL`,这样就可以在整个应用中共享`config.js`文件中的配置信息了。
需要注意的是,如果你使用的是Vue CLI 3.x及以上版本,则可以在`vue.config.js`中通过`configureWebpack`选项来配置axios的默认配置信息,例如:
```javascript
// vue.config.js
const config = require('./config')
module.exports = {
configureWebpack: {
devtool: 'source-map',
externals: {
'vue': 'Vue',
'axios': 'axios'
}
},
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0]['process.env'].BASE_URL = JSON.stringify(config.baseURL)
return args
})
}
}
```
在以上代码中,我们通过`require`函数来引入`config.js`文件,并将其中的`baseURL`赋值给环境变量`BASE_URL`,这样就可以在Vue的组件中通过`process.env.BASE_URL`来引用`config.js`文件中的`baseURL`了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)