vue3项目配置代理
使用 Vue CLI 的 devServer.proxy 配置。使用 http-proxy-middleware 进行配置。此方式和上面的方式类似,但是它是手动添加的而不是通过。
·
在 Vue3 项目中使用代理有两种方式:
使用 Vue CLI 的 devServer.proxy 配置
在 vue.config.js
中添加如下代码:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
此配置将会把所有以 /api
开头的请求代理到 http://api.example.com
。
使用 http-proxy-middleware 进行配置
在 main.js
中添加如下代码:
import { createApp } from 'vue'
import App from './App.vue'
import { createProxyMiddleware } from 'http-proxy-middleware'
const app = createApp(App)
app.use('/api', createProxyMiddleware({
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}))
app.mount('#app')
此方式和上面的方式类似,但是它是手动添加的而不是通过 vue.config.js
进行配置。
更多推荐
已为社区贡献6条内容
所有评论(0)