Vite配置环境变量以及反向代理请求

❝

我们在开发中会经常配置环境即ENV，并且在发送请求的时候会出现跨域问题，本文就着重讲一下Vite里面env的配置以及跨域的处理！

❞

env

env即环境，我们经常会配置开发环境、生产环境、测试环境。

环境配置

新建文件
.env 全环境
.env.development 开发环境
.env.production 生产环境
.env.test 测试环境

以上文件可按需要创建，当然也可以创建自己的env文件

上面文件默认按以下命令获取环境，当然可以自己配置命令，这里不多讲述！

development 代表 npm run dev

production 代表 npm run build

文件配置示例：
在vite中环境变量必须以VITE开头

// .env.development

// 下面讲述 NODE_ENV 主要用于判断当前环境
NODE_ENV=development

// 请求地址 vite.confing.js 会用到
VITE_BASE_URL=https://test.com
//项目名称
VITE_APP_TITLE=牛的不能再牛的项目

在代码中我们经常可能会判断当前环境，这个时候上面的NODE_ENV就起到作用了

在webpack中，它依旧叫NODE_ENV，在Vite中，它被编译成VITE_USER_NODE_ENV

// 获取方式
import.meta.env.VITE_USER_NODE_ENV

// 输出
development

不难发现其实我们也可以自己以VITE开头命名，但为了规范性我们还是命名成NODE_ENV吧

反向代理请求

为什么需要设置反向代理？

因为往往我们本地的请求大部分都会跨域，导致请求无法发出！

什么是跨域？

跨域是同源策略，简单来说就是协议、IP、端口三者需保持一直，在我们本地开发很难做到，线上使用nginx还是可以做到的

什么是协议、IP、端口一致？

通俗的讲

http://192.168.1.109:3000

协议即上面的http
IP即上面的192.168.1.109
端口一致即上面的3000

协议一般最常见的就是http和https，IP与端口一眼就明白不说了

只要上述三者一致就不会跨域！！！

Vite配置

在vite.config.js中配置，若没有请自行创建，以下是示例：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
    // 获取env
    const env = loadEnv(mode, process.cwd());
    return {
        // 插件
        plugins: [
            vue(),
        ],
        // 服务配置
        server: {
          // 当前项目启动端口
          port: 3000,
          // 反向代理
          proxy: {
            // 以/api开头的请求都进行代理
            '/api': {
                // 代理目标
                target: env.VITE_BASE_URL,
                // 改变源
                changeOrigin: true,
                // 重写把/api置空
                rewrite: (path) => path.replace(/^\/api/, ''),
              }
          },
        },
     }
})

上面把以/api开头的请求都进行代理，并把/api置空，使用loadEnv获取env拿到我们配置的请求路径

配置效果如下

// 后端请求地址
https://test.com

// 前端显示请求
http://192.168.1.109:3000/api/testapi

// 代理后的实际请求地址
https://test.com/testapi

这里不能使用import.meta.env，会报以下错误，无法获取到值

警告

如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多