请求路径如何设置附带基础路径
时间: 2023-11-27 09:05:34 浏览: 34
在前端开发中,有时候需要设置基础路径,以便在不同的环境中进行部署和访问。对于 Vue 项目而言,可以在 `vue.config.js` 文件中配置基础路径。
以下是一个示例 `vue.config.js` 文件的配置:
```
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-app/'
: '/'
}
```
上述配置中,`publicPath` 属性用于设置基础路径。在开发环境中,基础路径为 `/`;在生产环境中,基础路径为 `/my-app/`。
如果你希望在所有的请求路径中添加基础路径,可以使用 `axios` 库的 `baseURL` 属性,例如:
```
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.NODE_ENV === 'production'
? '/my-app/api/'
: '/api/'
})
export default instance
```
上述代码中,我们使用 `axios.create()` 方法创建了一个新的 `axios` 实例,并在 `baseURL` 属性中设置了基础路径。在开发环境中,基础路径为 `/api/`;在生产环境中,基础路径为 `/my-app/api/`。
这样,我们在发起请求时就可以不用手动拼接基础路径,而是直接使用相对路径或绝对路径进行请求,例如:
```
import axios from '@/utils/axios'
axios.get('/user')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
```
上述代码中,我们使用了 `axios` 实例的 `get()` 方法,发起了一个 `/api/user` 的 GET 请求。在生产环境中,这个请求的实际路径为 `/my-app/api/user`。