Vue3跨域代理设置

Vue 3 中, 就不要再使用什么 vue.config.js 文件来配置跨域代理了

Vue 3 的项目, 在通过 vite 来创建项目之后, 会自动创建一个 vite.config.js 文件, 跨域的代理就可以在这个文件中配置了。

直接上代码:

server: {
  host: "0.0.0.0", // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
  port: 5173, // 默认值就是 5173 这里可以不用配置这项
  cors: true, // 允许跨域
  proxy: {
    // 带选项写法：http://localhost:5173/api/bar -> http://localhost:3000/bar
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,//是否跨域
      rewrite: (path) => path.replace(/^\/api/, ''), // 非必要配置项, /api 在真正发送网络请求时, 会被替换掉
    },
  }
}

注释基本说明了对应配置参数的作用, 更多配置参数请 参考vite官网文档。

另外, 如果你像我一样, 使用 koa2 和 pm2 自己创建和管理了后端项目, 并且在 vue 项目 npm run build 打包之后, 将 dist 放置到了 koa2 项目的 public 文件中, 并修改了 koa2 的 app.js 中 静态资源的路径为 dist 文件夹。建议你的 axios 封装时做如下配置:

// 基础配置
const instance = axios.create({
  baseURL: import.meta.env.DEV ? '/api' : '', // 根据实际情况修改API地址, 也可以通过 .env.xxx 文件来配置环境变量来实现
  timeout: 10000 // 设置超时时间，单位为ms
})

重点是 baseURL 的配置。这样配置意思是 开发环境 ( 也就是 development 环境 ), 添加 /api 前缀, 否则不添加。

原因是 proxy 中的 rewrite 这个配置项。

其实, 不加这个 rewrite 配置项, 也就没有那么多事儿了。不过, 作为爱折腾的程序员, 不折腾怎么学知识呢?

后期我也会详细写一篇文章来记录 “Vue 3 + Koa2 + MySQL 开发和上线部署个人网站” 的具体过程。那里会详细记录项目的配置过程和参数配置依据。

本章完!