Vue cli 3.0 设置代理

Vue cli 3.0 proxy代理设置

如果没有根目录没有添加webpack的配置js文件，
那先新添一个vue.config.js的文件，这是vue-cli3.0中webpack的的配置文件

设置内容如下：

module.exports = {
    // 相当于webpack-dev-server，对本地服务器进行配置 
    devServer: {
        proxy: {
            "/api": {
                target: "https://api.douban.com" // 需要跨域的目标url，我这里用到的是豆瓣API
                changeOrigin: true, // 将基于名称的虚拟托管网站的选项，如果不配置，请求会报404
                ws: true,
                pathRewrite: {
                    "^/api": ''
                }
            }
        }
    }
}

原url：https://api.douban.com/v2/movie/in_theaters

项目使用的是axios进行请求，现在请求的方式变成：

this.$axios({
  method: 'get',
  url: '/api/v2/movie/in_theaters',
}).then(res => {
  console.log('请求结果：', res)
})

最后

以上就是健壮芒果为你收集整理的Vue cli 3.0 设置代理的全部内容，希望文章能够帮你解决Vue cli 3.0 设置代理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。