解决vite中使用资源被重定向到首页的问题

于 2024-07-23 13:44:10 发布
阅读量332 收藏 5
点赞数 6
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44815800/article/details/140631813
版权

问题描述

使用vite开发的项目，vite会自己开个本地服务器用来访问资源和页面

在这里插入图片描述
通过检测可以看到图片路径
http://192.168.0.106:8848/src/assets/images/logo.svg,这个资源在代码中访问是没有问题的，但是当你将其复制到浏览器中访问时，会被重定向到http://192.168.0.106:8848/src/assets/images/logo.svg#/home/index即首页

这个平时也不会有问题，但是当我使用iframe标签时却发现我得文件总是被重定向到首页

解决方案

经过一番搜索在github上找到了解决方案，修改源码，修改后访问/static开头的资源就不会被重定向了

原文地址
注意

  1. 这里文章中修改的是index.cjs文件，在我的项目中修改的是index.mjs文件
  2. 修改后可能需要删除node_modules/.vite文件夹然后重新npm run dev

在这里插入图片描述

白昼的星光@
关注
专栏目录
Vue3-32-路由-重定向路由
northcastle的博客
01-02 2531
vue3 中的重定向路由基本使用案例
vite中server.proxy的一些配置
m0_67264513的博客
04-04 3311
vite配置的server.proxy其实和vue-cli配置的devServer.proxy大致一样。PathRewrite：替换请求中匹配的内容，在这里就是去掉 /api 前面的 ^changeOrigin表示是否跨域。
Vite判断不同环境区别打包并重定向至指定资源
qq_45279180的博客
04-10 1529
Vite内置了dotenv库，这个库会自动读取.env文件。.env # 所有情况下都会加载.env.[mode] # 只在指定模式下加载一般来说我们会有两个.env文件和，如果我们没有显性的去指明mode，那么在执行dev命令时会读取，而在build的时候会读取文件。如果我们要使用这些值需要用到Vite提供的: {string} 应用运行的模式。import.: {string} 部署应用时的基本 URL。他由base配置项决定。import.
Vite+Vue3项目部署到IIS后，刷新报错404，URL重写后仍报错
acheding的博客
11-12 5248
可以尝试在 IIS 管理器里点击网站下的文件夹，右键刷新，并重启服务器，一次不行就试两次。
【vue3 + vite + nginx部署重定向问题】
lookup_lg的博客
11-17 409
因为node也即docker内部的端口是80，而映射宿主机的端口为8080，导致访问http://localhost:8080/web的时候，node内部执行了重定向到http://localhost/web/（此处的端口猜测应该是用node内部的，也即80）。应用服务器可能检查请求的 URL，并基于其内部逻辑进行重定向。访问http://localhost:8080/web 跳转到了 http://localhost/web/可能有其他原因或解决方案，暂时未知。宿主机和docker都用同一端口。
首页路由的重定向
qq_32656561的博客
08-15 375
components下新建Welcome.vue，前面创建vue文件的时候命名有点不统一，在这里修改一下： Welcome.vue: <template> <div> <h3>Welcome</h3> </div> </template> <script> export default { name: 'Welcome' } </script> <style lang=
Vite proxy-rewrite 属性详解
lsk222的博客
04-28 1311
proxy rewrite属性详解
VUE_路由重定向
小歪博客
01-18 4595
官方文档：https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由： const router = new VueRouter({ rout
vue的proxyTable的地址代理和重定向，配合nginx的地址代理问题
tian_xuewu的博客
07-31 4167
备注：vue和nginx都做了地址代理，但是vue中的重写更改了地址，导致nginx代理失效（找不到）的问题； 问题场景： 1.vue中的地址代理（有问题的写法） 目录：/config/index.js中的proxyTable： '/upload':{ target : 'http://192.168.1.123:8007', //目标地址 192.168.1.123为随便写...
vite创建vue3项目页面引用public下js文件失败解决
夏日漱石的博客
09-13 4743
📢vite创建vue3项目页面引用public下js文件失败解决
解决vite打包的项目不能直接用浏览器运行HTML文件
m0_66687901的博客
11-03 2441
1.安装插件@vitejs/plugin-legacy 2.配置vite.config.ts（没有就找vite.config.js） 3.配置路由 4.修改打包后的index.html文件
Vue的proxy不生效总是重定向到localhost，请求头没有cookie怎么解决？
clancy_pinkie的博客
03-29 927
pathRewrite不生效就干掉它，请求头没有cookie是因为没使用代理
Vue3+vite个人博客网站从0-1（element-plus组件库引入+首页样式布局）
m0_56344602的博客
01-20 4202
接着上一节，这一章主要是将element-plus组件库引入到项目中，然后将咱们之前漏掉的css预处理器给安装上来，然后讲首页基本显示出来，如果没有从第一章开始的小伙伴可以先从第一章开始看
Vue3和Vite实现极客时间官网首页
chong2230的专栏
03-24 1337
近日各大公众号都推vite的文章，也看了尤大大做客GitHub Open Source Friday的直播视频（https://www.bilibili.com/video/BV1kh411Q7WN），心痒痒也想用一用。在极客时间网站上学习过专栏也上过训练营，觉得还不错，于是选择了官网进行练手。 首先参考vite中文站（https://cn.vitejs.dev）和vue3中文站（https://vue3js.cn/docs/zh/）里的内容，创建项目 npm init @vitejs/app 需要注
vue基础教程（7）——构建项目级首页
关注前端，关注原创
04-25 2297
前面我们学习了vue的路由和登录页搭建，本文将和大家共同学习首页的搭建。首页示例如图：很多项目经验比较少的同学，一般都是对某些语法很熟悉，但是对整个项目是如何从零开始搭建的，页面布局是如何通过代码实现的，可能并未过多关注。也许有人会说，这些ui框架或者开源项目，都会开箱即用，可如果框架提供的布局无法满足要求呢，如果开源项目存在bug呢，如果企业做大做强需要UI重新设计web端呢？我们有太多的理由去了解这些基础知识，我们可以永远不做，但是不能不会！
Vue路由重定向
m0_53951384的博客
11-08 2829
编程式导航，如何跳转传参？1.path路径跳转query传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'})动态路由传参this.$router.push('/路径/参数值')path: '/路径/参数值'})2.name命名路由跳转query传参name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'})
vite 多页面配置
热门推荐
智韬的博客
10-12 1万+
最近有多页面项目需要重构，就想试试使用vite，但是网上很多方法不太全面踩了不少的坑， 网上的多页面配置方案也不少，我只给出了我成功配置并在使用的方案 目录结构 { dist: // 存放打包后的文件, node_modules: , src: { assets: // 一些静态文件, components: // 公用组件, index: { // 页面1 index.html, main.js, App.vue, ... }, page: { // .
vue3+vue-router+vite 实现动态路由
最新发布
YuShiYue的博客
07-03 2903
举一个最常见的例子，比如说我们要开发一个后台管理系统，一般来说后台管理系统都会分角色登录，这个时候也就涉及到了权限，比如说这个后台管理系统现在有超级管理员，管理员，运维，财务等这几个角色，每个角色登录系统之后都会有不同的权限，超级管理员需要所有的权限，财务可能只需要财务相关的模块(菜单)以及按钮等，通常实现这种需求会有以下常见方案。
vite中使用proxy代理解决跨域
04-29
在 Vite 中，可以使用 `proxy` 选项来代理请求，解决跨域问题。 例如，我们可以在 `vite.config.js` 中配置一个代理，将所有 `/api` 开头的请求转发到 `http://localhost:3000`: ```js export default { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } ``` 这样，当我们在应用中发起一个请求 `/api/users` 时，Vite 会将其转发到 `http://localhost:3000/api/users`，并将响应返回给应用。 其中，`changeOrigin` 选项用于修改请求头中的 `Host` 字段，使其与目标域名一致，以避免一些安全限制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值