Vue,mode:‘history‘去掉#号解决方式，配置一下nginx

最新推荐文章于 2024-04-04 13:00:24 发布

EasyXi

最新推荐文章于 2024-04-04 13:00:24 发布

阅读量573

点赞数 1

分类专栏：个人文章标签： vue java nginx nginx反向代理 react

本文链接：https://blog.csdn.net/qq_41651707/article/details/113107101

版权

个人专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端vue：
mode:‘history’

nginx：
location / {
root //www/wwwroot/**.com/;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

EasyXi

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

详解Vue路由History mode模式中页面无法渲染的原因及解决

08-29

Vue.js 的路由管理器 vue-router 提供了两种主要的导航守卫模式：Hash 模式和 History 模式。在本文中，我们将深入探讨 History 模式的细节，以及在使用过程中遇到的页面无法渲染和 404 错误的问题及其解决方案。 1...

VUE : vue-cli中去掉路由中的井号#操作

10-14

然而，切换到History模式并不只是在Vue Router配置中简单地更改`mode`属性，还需要对服务器配置进行相应的调整。 **配置Vue CLI项目** 1. **Vue CLI项目的配置**：在Vue CLI 2.x版本的项目中，配置文件位于`...

2 条评论您还未登录，请先登录后发表或查看评论

Vue 去除路径中的＃号

11-30

在开发过程中发现路径中带有/#/的标示，而且还去不掉，很丑陋。众所周知，vue-router有两种模式，hash模式和history模式。带＃的则是hash模式。将router中的mode设置为history就可以了接下来有个问题，界面一刷新，就变404了！！！！网上搜了下，需要对后端环境进行一个配置。这里只列举nginx的配置，其他的配置点击这里去官网看先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { build: { env: require('./prod.env'),

nginx配置vue(history模式)

m0_37634363的博客

03-12

1546

问题的原因：项目本来使用 hash 的路由模式来部署，因为需要关系，现在要改成 history 的模式来部署了（路径上不要有 # 号）第一步：修改项目的 router/index.js 的配置 const router = new VueRouter({ mode: 'history', // 将 hash 改成 history routes: [ ...pages ] }) 修改 config/index.js assetsPublicPath assetsPublicPat

Nginx 部署 vue项目（history模式）

yorcentroll的博客

04-09

3370

大家都知道，vue router有两种模式： 1，hash模式 hash模式应该是平时大家用的最多的一种模式，它的标志是路由地址都会加上#。 2，history模式 history模式则不会加上#号，这样url看起来比较干净。但是使用history模式，会导致一个问题，就是在某个路由页面上刷新的时候或者直接访问多级路由url的时候会报404. import Vue from 'vue'...

vue路由history模式下的nginx配置

胡西风的博客

04-02

2809

vue路由 history模式 nginx配置

Vue路由为history，开启Vue gzip 模式的nginx配置

u010207995的博客

08-24

407

不开启gzip配置，加红色部分： location / { root /etc/nginx/html; index index.html; try_files $uri $uri/ /index.html; } 但是发现前端不能访问了，原因是启用了Vue的zip模式后，第一次访问静态文件，在nginx没有找到，第二次会去找.gzip文件，然后返回，但是加了try_files $uri $uri/ /index.html;后，第二次地址就被重写成/index.html了，

在nginx上部署vue项目(history模式)的方法

11-30

在Vue.js应用中，`vue-router` 是一个常用的路由管理库，它提供了两种导航解析模式：`hash` 和 `history`。默认情况下，Vue应用使用`hash`模式，URL会显示为`http://localhost:8080/bank/page/count/#/`的形式，其中...

nginx去除vue、react项目#

user_xbp的博客

05-09

1821

vue设置路由为history 模式，react设置路由为BrowserRouter。 location / { root D:/workSpace/project/build; try_files $uri /index.html; }

vue3 history模式配置及nginx服务器配置

持续学习中

04-11

1万+

vue3开始默认新建的项目都是history模式，不过history模式打包后想要使用正常访问的话，需要后端服务器进行配置才可以，否则可能会出现刷新后404的问题。这样，我们通过访问https://abc.xxx.com/calculator/或者https://abc.xxx.com/calculator/wap/这个路径就可以正常使用了，刷新也不会出现404问题。以上例子中vite.config.js的配置，打包后访问的路径为https://xxx.com/calculator/。

记一次vue去除#问题处理经过小结

12-10

1、vue项目，在浏览器中看到的路由都是带有#的，如果想去掉#，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可：使用mode: ‘history’属性，在路由代码中添加mode：’history’即可 2、build以后部署到服务器，会出现刷新页面报404错误，查看了一些资料和官方vue history模式的配置方法进行尝试，我原以为就这样配置一下就可以了，结果…… 我的网站是阿里云虚拟机+nginx+tomcat进行建站，在nginx的配置文件中，起初为去掉#时配

Nginx 部署去掉 # 的Vue 项目（解决刷新后访问 404）

phubing

11-30

3250

http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$st...

nginx解决vue上线去掉#的方法

caichenglongcsdn的博客

07-23

4871

最近vue项目要上线了，但是习惯于原来的网址方式，vue是自动会追加#的，后来出于强迫症，就像把这个#去掉，一方面看着舒服，另一方面对于一写网站的分享的问题也会避免，例如微信H5分享会把链接#后面的忽略掉，于是我就在nginx上面进行了一下处理。 server { listen 80; server_name www.xx.com; location / { root /opt/index/dist; index index.html index...

nginx配置vue h5 history去除#号

热门推荐

qq_35267557的博客

07-24

1万+

vue的默认配置是使用hash模式，这样我们访问的时候都带有了一个#号，再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式，优势就出现了需要去除#号，于是vue端就需要配置该模式，并且使用懒加载，vue端的配置如下：首先先声明一下，这是使用vue+nginx实现前后端分离的项目，并且使用vue axios实现代理功能(允许跨域并且服务端已经开启跨域)，然后就是打包的配置： ...

mode: 'history', 去掉路由地址的#

a662852186的博客

06-10

443

可以看到这段源代码 D:\workspace\xxx\node_modules\vue-router\types\router.d.ts 转载于:https://www.cnblogs.com/tabCtrlShift/p/9162652.html

nginx 配置解决 vue history模式下空白，以及SSL证书安装

2401_84006953的博客

04-04

1118

server {#你的域名root html;#你的网站根目录#网站默认访问文件NULL:!aNULL:!MD5:!ADH:!RC4;uribaiyiuri//baiyilocation ~ .php(.*)$ { #HP必须的配置，否则浏览器访问会直接下载php源码文件.+)$;

vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置

qq_44552416的博客

01-10

4906

如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。

vue去# history模式,nginx配置

qq_34685515的博客

09-27

278

nginx配置 route文件配置，设置根路径文件/dist

vue history路由 nginx配置