vue vite 配置代理解决开发跨域问题_编程_山海自留地

山海自留地

vue vite 配置代理解决开发跨域问题

编程
2025-06-02 06:18

1,项目根目录 vite.config.js

server: {
    host: "0.0.0.0",
    cors: true,
    port: 8991,
    open: false, //自动打开
    proxy: {
      // 这里的ccc可乱写, 是拼接在url后面的地址 如果接口中没有统一的后缀可自定义
      // 如果有统一后缀, 如api, 直接写api即可, 也不用rewrite了
      "^/apis": {
        target: "http://www.baidu.com", // 真实接口地址, 后端给的基地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/apis/, ""), // 将apis替换为空
      },
    },
  },


2.开发环境变量设置 根目录 .env.development

VITE_URL_BASEURL='/apis'


3. axios 引入环境变量

const instancs = axios.create({
  baseURL: import.meta.env.VITE_URL_BASEURL,
});