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高德地图JS API实现海量点标记示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue 函数调用加括号与不加括号的区别,帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vue中el-table单元格复制功能实现,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了vue如何使用watch监听指定数据的变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文介绍了Vue3中实现父子组件双向绑定的四种方式并对比了各自适用场景与优缺点,每种方式结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-07-07
这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了vue实现购物车功能，商品分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要为大家详细介绍了6个vue前端常用的工具类,可直接复用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要介绍了vue中动态组件使用及传值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论