如何使用Vite配置Vue项目实现跨域及环境变量详细设置？

本文共计448个文字，预计阅读时间需要2分钟。

目录+如何配置跨域，代理域名+区分开发环境和生产环境+以及预发布环境+可以做什么+补充：解决跨域常用方法+一、VUE中常用proxy来解决跨域问题+二、JSONP解决跨域+三、CORS是跨域资源

目录

• 如何配置跨域，代理域名
• 区分开发环境和生产环境，以及预发布环境
• 可以做什么事
• 补充：解决跨域常用方法
• 一、VUE中常用proxy来解决跨域问题
• 二、JSONP解决跨域
• 三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上
• 四、iframe实现跨域
• 总结

如何配置跨域，代理域名

不管使用什么脚手架，配置代理都是绕不开的话题，下面是vite的代理

server: { proxy: { '/api': { target: 'baidu.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } },

区分开发环境和生产环境，以及预发布环境

在根目录创建 .env[mode] 文件，在项目执行 npm run dev 的时候vite会自动去读取.env.development文件里面的配置，执行npm runbuild进行打包之后也会自动将.env.production的内容打包进去，这里注意的是，如果你想进入预发布模式的话需要在打包的时候进行mode配置:npm run build --mode staging
公共的 .env
开发环境 .env.development
生产环境 .env.production
预发布环境 .env.staging

在.env.development配置了一个域名:

`.env.development` // 开发环境配置 VITE_BASIC_URL = basic.com

可以做什么事

针对不同的环境可以去配置，例如页面的统一标题，参数常量…
下面根据环境配置不同的请求域名