❝
我们在开发中会经常配置环境即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连(关注、赞、在看),谢谢! 后面会更新更多。
关注公众号了解更多
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net