vue.config.js target如何配置动态的url
时间: 2024-05-11 10:16:25 浏览: 16
您可以通过设置`publicPath`和`devServer.proxy`来动态配置Vue.js的`target`。下面是一个示例:
```javascript
// vue.config.js
module.exports = {
// 设置publicPath为当前环境下的根目录或生成的目录
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/',
// 设置代理
devServer: {
proxy: {
// 访问 /api/users,会被代理到 target 成 http://localhost:3000/api/users
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
在这个示例中,`publicPath`被设置为当前环境下的根目录或生成的目录。`devServer.proxy`设置了一个代理,将所有以`/api`开头的URL代理到`http://localhost:3000`。`changeOrigin`选项将`target`的主机头更改为目标URL的主机头,以避免跨域问题。`pathRewrite`选项将`/api`替换为空字符串,以确保代理请求正确。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![](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)