Vue3设置Proxy代理解决跨域

Proxy

Vue3当中的跨域解决方案还是跟Vue2差不多用的都是proxy,而且Vue3的双绑原理也是用的proxy来进行数据的拦截。

我们在V3当中创建完项目之后是没有vue.config.js文件的

我们需要手动在根节点去新建一个vue.config.js文件

在里面就可以做基本的配置了

module.exports = {

  // 基本路径

  publicPath: "/",

  // 输出路径

  outputDir: "dist",

  // 静态资源

  assetsDir: "./",

  // eslint-loader是否在保存时候检查

  lintOnSave: true,

  // 服务项配置

  devServer: {

    host: "localhost",

    port: 8080,

    https: false,

    open: true, // 设置代理proxy

    proxy: {

      "/api": {

        target: "http://192.168.213.181:8080/",

        changeOrigin: true, //表示是否跨域，

        pathRewrite: {

          //表示需要rewrite重写的

          "^/api": "  ",

        },

      },

    },

  },

};

如果需要做多个域名的跨域的话，就在proxy当中在多写一个api在里面的target中接着配置。