vue history模式打包出错

最新推荐文章于 2023-08-29 14:18:06 发布
原创 最新推荐文章于 2023-08-29 14:18:06 发布 · 511 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在项目与第三方页面跳转中遇到的hash模式问题，即hash值在跳转后被编码为'%23'，导致无法使用hash模式。文章提出了解决方案，通过使用history模式并进行相应的Nginx配置，具体是在Nginx上添加'try_files$uri$uri//hyd-mobile-app/index.html'，确保了应用在测试环境下的正常运行。

由于项目和三方有页面跳转，hash传给三方，三方跳转回来之后hash的 '#'会编译成 '%23',

所以hash模式就不能使用了。

幸好还有history模式 不带'#'  这样不就可以解决问题啦  美滋滋。

想法很好， 但在打包后扔到测试环境上果然不好使。。。哈哈

 goole一顿查 有大神说只要在ngnix上加：

try_files $uri $uri/ /hyd-mobile-app/index.html

这样就好啦  ok
 

 

 

 

vite3+vue3 项目打包优化
前端知识分享喵
05-16 2812
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
当使用 history 模式的前端路由时静态资源服务器配置详解
纯爱枫若情的博客
05-19 2134
前言 对于前端工程师而言，多多少少会碰到按需加载的需求。 ​ 比如一个系统，需要用户登陆以后才能使用，对于传统的前后端未分离的情况，我们一般的处理方式是，当检测到用户未登录的时候，一般会重定向到登录页面，让用户进行登录。 ​ 但是对于前后端分离的情况，前端工程师一般倾向于单页面的处理模式，而想要处理这种情况的话，我们一般传统的做法是，会选择采用 location.search 的方式，即通过参数来判断。 ​ 比如检测到用户没登陆，我们会刷新页面，自动在地址后面加上诸如 ?page=login 等形式的参数，
[vue]history模式报错404错误
weixin_34132768的博客
01-16 179
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue路由模式为history打包导致的问题@小四@王云飞
u010544438的博客
09-27 772
Vue-cli路由为history的话 ，在服务器下面会出现一系列不可避免的问题，我会一一带着大家，一步步进行解决… 第一个问题，背景图片路径问题 解决方案也很简单，当然这并非唯一解决的方案 // build/utils.js if (options.extract) { return ExtractTextPlugin.extract({ use: loaders...
vue路由使用history模式，项目打包发布后不能通过地址栏里的地址进行路由跳转，跳转404 not found，下面是解决方案
m0_58471361的博客
08-29 639
【代码】vue路由使用history模式，项目打包发布后不能通过地址栏里的地址进行路由跳转，404 not found？
Vue打包遇到的坑。。。。history和hash模式也会产生区别
CheckMate_Room的博客
09-20 3219
Vue项目再进行打包时，各位小伙伴肯定遇到各种状况，下面我来总结下我所遇到的状况。 1. 打完包之后,请求static文件夹中的文件出现空白页，f12 提示 404。  在config文件夹中打开index.js，更改assetsPublicPath为'./'，个人理解光是"/"代表的是根目录，"./"代表相对路径。 如果你放在服务器上的根目录的话，没有差别；如果放在文件夹内部的时候，"....
vue项目路由模式为history时打包后部署在nginx服务器后，刷新页面空白的问题
u011295864的博客
07-16 5127
放在nginx服务器根目录下的情况： vue.config.js配置： publicPath: '/' router配置： base: '/', mode: 'history' nginx配置文件： location / { try_files $uri $uri/ /index.html; root html; index index.html index.htm; } 放在nginx服务器根目录下一个子目录下的情况（以子目录名称是demo为例）： vue.
vite vue3.0 路由是History模式打包后白屏
最新发布
03-19
嗯，用户问的是Vite Vue3.0使用History模式打包后出现白屏的问题。这个问题我之前也遇到过，得仔细想想可能的原因和解决办法。首先，白屏通常是因为资源加载路径错误或者服务器配置不正确，尤其是在使用History模式...
如何把vuejs打包出来的文件整合到springboot里
10-18
5. 配置嵌入式Tomcat处理前端路由：为了支持history模式，需要在Spring Boot项目中添加配置，使得嵌入式Tomcat能够将所有前端路由的请求转发到index.html页面，通过Vue Router来匹配相应的路由。这通常涉及到在...
Electron搭配React的history路由模式打包exe客户端
sinat_31076477的博客
07-13 1200
新建项目 相关依赖的版本如下 生产 开发 项目架构详解 关于preload.js 和 renders.js的详解 原文链接 在electron启动前端项目 首先需要将打包📦后的前端代码放到项目文件夹下，注意是放到文件夹根目录而不是将诸如(vue打包后)或者（react打包后）文件阿吉直接拷贝到项目的文件夹。文件夹下的文件目录如果是react就应该如下 开始编写main.js 直接贴出代码如下 关于package.json的编写 由于使用的是electron-builder故可以去.
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
vue多页面项目中路由使用history模式的方法
10-16
主要介绍了vue多页面项目中路由如何使用history模式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue使用history路由模式后打包空白
flowRight的博客
04-30 1768
vue路由默认是hash模式，改成history路由模式可以去掉#,这个除了需要后端服务配合外，config文件修改如下
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
weixin_33994823的博客
12-31 1220
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官...
vue在history模式下打包部署问题解决
爱学习的大雄的博客
03-01 2144
路由的hash模式与history模式打包时差异如下，hashpublicPath配置为./打包完成后可以直接运行dist包下的index.html且有界面显示部署时直接使用宝塔部署即可，无需配置其它historypublicPath配置为或项目在服务器根下路径打包完成后不可直接运行dist包下的index.html，必须要部署到服务器才行部署时还需要自己去配置nginx，实现服务端的映射。
vue history模式下，打包后，出现空白页情况
qq_15038747的博客
12-22 1662
修改config/index.js下的build中的assetsPublicPath: '/' 为 assetsPublicPath: './', build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path....
解决Vue项目history模式下打包部署到云服务器，访问路径，重复点击路由，刷新报404异常的问题！！！
m0_57249797的博客
10-22 1952
history模式下打包部署的访问路径 以下步骤皆以Tomcat为例 部署位置是Tomcat的webapps包下（可以自己配存放位置，这里不是重点） 打包路径问题一，保证Vue的路由路径与我们部署在webapps包下的路径一致 问题二，在项目目录下新建vue.config.js文件，增加配置： module.exports = { publicPath: './', assetsDir:'static', lintOnSave: true, productionSourceMap: fa
vue项目的mode:history模式打包空白
大大黄的博客
04-09 2930
Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。简单介绍下两种模式： hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hell...
Vue History 模式下 整合Nginx部署踩坑过程
weixin_45081001的博客
07-10 1231
在公司部署Vue项目期间，因Vue的Router下的Hash模式的#号太过于难看，就去把模式改为了history模式，谁想打包后出现了无尽的深渊，各种问题浮现： 问题一： 通过history模式打包后，部署到nginx服务器内出现了，无法路由的问题，页面展示空白页， 之前用hash模式直接用nginx部署采用查询root方式直接跳转，hash模式下没出现过问题，但是 此处的history模式直接就展现了空白页，无法进行路由，查看了官网说明： 解决办法： 此处我采用了Nginx服务器进行配置： 文档配置：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值