vue中vite.config.js配置跨域以及环境配置方式
更新时间：2023年04月20日 09:21:02 作者：开发那点事儿~
这篇文章主要介绍了vue中vite.config.js配置跨域以及环境配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
如何配置跨域,代理域名,下面是vite的代理
server: {
port: 8516,
host: true,
open: true,
proxy: {
'/license-province': {
target: 'http://xxx.xxx.x.xxx:xxxx',
changeOrigin: true,//是否跨域
rewrite: (p) => p.replace(/^\/license-province/, 'license-province')//重写路径
}
}
},区分开发环境和生产环境,以及预发布环境
在根目录创建 .env[mode]文件,在项目执行 npm run dev 的时候vite会自动去读取 .env.development 文件里面的配置,执行 npm run build 进行打包之后也会自动将 .env.production 的内容打包进去.
注意：如果你想进入预发布模式的话需要在打包的时候进行mode配置: npm run build --mode staging
- 公共的: .env
- 开发环境: .env.development
- 生产环境: .env.production
- 预发布环境: .env.staging
我们的 .env.development 和 .env.production 文件里面都会有 VITE_APP_ENV 配置:
在我们的 vite.config.js文件中:
以上是 vite.config.js 的配置,上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域.
VUE中常用proxy来解决跨域问题
1.在vue.config.js中设置一下代码:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 配置跨域
'/api':{
target:`http://xxx.xxx.xxx`, //请求后台接口
changeOrigin:true, // 允许跨域
pathRewrite:{
'^/api' : '' // 重写请求
}
}
},
}2. 创建axioss实例时,将baseUrl设置为 '/api'
const http = axios.create({
timeout: 1000 * 1000000,
withCredentials: true,
BASE_URL: '/api'
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了基于vue--key值的特殊用处详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue parseHTML源码解析hars end comment钩子函数
这篇文章主要为大家介绍了vue parseHTML源码解析hars end comment钩子函数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库，这篇文章主要介绍了Vue使用Echarts画柱状图2022-12-12
解决vue创建项目使用vue-router和vuex报错Object(...)is not a&nb
这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
下面小编就为大家分享一篇解决使用vue.js路由后失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了使用keep-alive时,数据无法刷新的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
众所周知Element 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。下面这篇文章主要给大家介绍了关于利用vue + element实现表格分页和前端搜索的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-12-12
本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果,我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件,感兴趣的朋友一起看看吧2024-04-04
这篇文章主要介绍了解决在vue的mounted中获取对象为null问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论