❝
我们在开发中会经常配置环境即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连(关注、赞、在看)，谢谢! 后面会更新更多。
关注公众号了解更多
