Vue cli 3.0 设置代理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/soxiuzi/article/details/88643488

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)
})