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'
}
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近项目停工了，RageFrame的学习暂时告一段落，这一篇给大家分享下有关单点登录的相关知识，并提供一些demo给大家参考，对vue单点登录的实现方式感兴趣的朋友一起看看吧2021-11-11
Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法
本文主要介绍了Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
vue3与webpack5安装element-plus样式webpack编译报错问题解决
这篇文章主要介绍了vue3与webpack5安装element-plus样式webpack编译报错,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了浅谈VUE中演示v-for为什么要加key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了Vue项目实现简单的权限控制功能，文中给大家介绍了两种方式进行权限限制，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-07-07
这篇文章主要给大家介绍了关于实现Vue3版抖音滑动插件踩坑指南,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了使用vue打包时gzip压缩的两种方案小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本文主要介绍了FastApi+Vue+LayUI实现前后端分离的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在vue中，子组件如果想修改父组件的变量，一般做法是通过绑定事件的方法，父组件向子组件传递修改变量的方法，子组件触发修改变量的方法执行，这种方式中规中矩；另一种方法是使用sync修饰符，此方法可以减少很多代码量2022-08-08
最新评论