1.vite.config.js里面配置服务

参考官网:https://cn.vitejs.dev/config/server-options.html#server-host

原理大意:服务器和服务器之间默认是没有跨域限制的,vite通过开启代理服务器充当中间角色,将客户端的请求转发到服务器上,服务器响应后,再将响应结果返回给客户端。

注意:vite反向代理仅在开发环境有用,如果打包了,就不会走反向代理了,这是因为打包后vue3项目会被编译成纯前端代码,一般情况下它会被放在和后端一样的ip端口下,这个时候就不会有跨域问题了。

server: {
    host: '127.0.0.1', // 主机ip
    https: false, // 是否开启 https
    open: true, // 是否自动在浏览器打开(就是npm run dev后,会自动在浏览器打开这个项目的意思,而不需要我们再手动点一次网页链接)
    port: 5173, // 端口号默认值5173
    // 代理,即'/api'会被转义成'http://192.168.xx.xx:8080',作用于接口前缀
    proxy: {
      "/api": {
        target: `http://192.168.xx.xx:8080`, // 后台接口前缀
        changeOrigin: true, // 是否允许跨域
        secure: false, // 如果是https接口,需要配置这个参数
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  },

2. 创建.env.development(开发环境)和 .env.production(生产环境)文件
a. 开发环境:

npm run dev 编译的是.env.development文件。

我们可以在.env.development里面定义:VITE_BASE_URL = "/api",

然后封装的接口文件里面取出VITE_BASE_URL给baseURL,就能统一给接口地址加上"/api"了,这样就能和上面定义的反向代理关键字"/api"联系起来,只要是请求,在开发环境下都会走vite代理(我这里封装的是axios):

import axios from "axios";

const baseUrl = import.meta.env.VITE_BASE_URL; //接口统一域名

// 设置axios的默认值
const instance = axios.create({
  baseURL: baseUrl,
  // timeout: , //设置超时时间
  headers: {
  },
});
b. 生产环境:

npm run build 编译的是.env.production文件。

生产环境时,我们只需要将给VITE_BASE_URL赋值接口的ip地址就行了,这样接口文件的baseURL得到的也是接口的ip地址,生产环境不跨域,不需要走代理。

另外,img标签的src属性本身是发起get请求的,也就是说也可以给img定义一个VITE_xxx统一前缀,然后开发环境和生产环境区分开就行了。

附目录结构参考:

Logo

前往低代码交流专区

更多推荐