vue使用vite配置跨域及环境配置的方法
导读：本文共2954字符，通常情况下阅读需要10分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 如何配置跨域，代理域名不管使用什么脚手架，配置代理都是绕不开的话题，下面是vite的代理server:{proxy:{'/api':{target:'https://baidu.com',changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'... ...
目录
(为您整理了一些要点),点击可以直达。如何配置跨域，代理域名
不管使用什么脚手架，配置代理都是绕不开的话题，下面是vite的代理
server:{proxy:{'/api':{target:'https://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=https://basic.com
可以做什么事
针对不同的环境可以去配置，例如页面的统一标题，参数常量…
下面根据环境配置不同的请求域名????
import{defineConfig,loadEnv}from'vite'exportdefaultdefineConfig(({mode})=>{//获取当前环境的配置constconfig=loadEnv(mode,'./')return{server:{proxy:{'/basice':{target:config.VITE_BASIC_URL,changeOrigin:true,rewrite:(path)=>path.replace(/^\/basice/,'')}}},}})以上是vite.config.js的配置，上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域
补充：解决跨域常用方法
一、VUE中常用proxy来解决跨域问题
1、在vue.config.js中设置如下代码片段
module.exports={dev:{//PathsassetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{//配置跨域'/api':{target:`http://www.baidu.com`,//请求后台接口changeOrigin:true,//允许跨域pathRewrite:{'^/api':''//重写请求}}},}2、创捷axioss实例时，将baseUrl设置为 ‘/api’
consthttp=axios.create({timeout:1000*1000000,withCredentials:true,BASE_URL:'/api'headers:{'Content-Type':'application/json;charset=utf-8'}})二、JSONP解决跨域
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><body><divid="textID"></div><scripttype="text/javascript">functiontext_jsonp(req){//创建script的标签varscript=document.createElement('script');//拼接urlvarurl=req.url+'?callback='+req.callback.name;//赋值urlscript.src=url;//放入头部document.getElementsByTagName('head')[0].appendChild(script);}</script></body></html>三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上
在CORS请求，头部信息中包含以下三个字段：
Access-Control-Allow-Origin： 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求，
Access-Control-Allow-Credentials： 可选，值为布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true。如果要发送Cookie，Access-Control-Allow-Origin必须设置为必须指定明确的、与请求网页一致的域名
Access-Control-Expose-Headers：可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定
四、iframe实现跨域
iframe(src){//数组if(Array.isArray(src)){this.docs.visible=true;}else{this.docs.visible=false;}this.link=srcif(this.docs.visible==false){if(this.$refs['ruleIframe']&&this.$refs['ruleIframe'].querySelector('iframe')){this.$refs['ruleIframe'].querySelector('iframe').remove()//删除自身}variframe=document.createElement('iframe');iframe.width='100%';iframe.height='100%';iframe.setAttribute('frameborder','0')iframe.src=src;this.append(iframe)}},//创建元素防止获取不到ruleIframe递归append(iframe){if(this.$refs['ruleIframe']){this.$refs['ruleIframe'].appendChild(iframe);return}setTimeout(()=>{this.append(iframe);},500)}, </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">vue使用vite配置跨域及环境配置的方法的详细内容，希望对您有所帮助，信息来源于网络。