vue3+vite配置反向代理+结合.env.development文件

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.11.11:8080',作用于接口前缀
    proxy: {
      "/api": {
        target: `http://192.168.11.11: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统一前缀，然后开发环境和生产环境区分开就行了。

附目录结构参考：