vue项目中的 history模式配置

最新推荐文章于 2024-07-24 14:51:10 发布
最新推荐文章于 2024-07-24 14:51:10 发布
阅读量3k 收藏 3
点赞数
分类专栏： 技术类 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26759261/article/details/88975364
版权

前端直接在路由router下面的index.js文件里面写上history模式即可

在这里插入图片描述
如果是打包之后的文件不是放在服务器根目录里，则加上服务器的路径名称，如上，项目时放在服务器根目录下的 “webpagezy”文件下，则加上base：‘webpagezy’

后端修改nginx.conf配置文件
在这里插入图片描述

不见_长安
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Vue路由History mode模式中页面无法渲染的原因及解决
11-30
Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。 一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。如果因为业务需要，或者单纯是觉得带#号不美观，那么可以使用history模式，简单而言就是在router的配置文
Vue项目使用history模式，打包部署到二级目录
幻影浪子
01-30 2066
三处设置
vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-01 4780
vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath
vue2 工程 hash 模式转成 history模式 记录
最新发布
lyx1838102537的博客
07-24 293
vue2 工程 hash 模式转成 history模式
VUE 配置history路由模式配置
yh4494的博客
04-07 4136
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。
vue打包后 history模式 tomcat部署 子目录静态文件路径 分析
LikeStudyBoy的博客
09-03 4109
history 根目录 路由mode变为history后，需要在服务器配置 url重写,在根目录 创建web.config文件 加下面内容复制进去 <?xml version="1.0" encoding="utf-8"?> <configuration>   <system.webServer>    &nbs...
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
Vue项目History模式404问题解决方法
12-01
- **跨域问题**：如果涉及到跨域，需要在Nginx配置中添加CORS设置，或者在Vue项目中配置代理。 - **其他服务器环境**：虽然本示例是针对Nginx，但类似的问题也可能出现在其他服务器环境中，如Apache等，解决方案也...
Vue下路由History模式打包后页面空白的解决方法
12-09
在 Vue 项目中切换到 History 模式时，首先需要在 Vue Router 配置中明确指定 `mode`： ```javascript const router = new VueRouter({ base: '/history', mode: 'history', routes: [...] }); ``` 这里的 `base`...
vue路由模式及 history 模式下服务端配置
csdn姚宏波
04-28 1万+
前言 vue 项目中，我们比较常用的模式为 hash 和 history 模式 默认情况下，vue 项目采用的就是 hash 模式 有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置 这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为 1. hash 模式 1.1 什么是 hash 模式 先从一个熟悉的锚标记案例开始，帮助大家理解 hash
Vue项目打包部署（history模式）
程麒阁的博客
10-19 7170
Vue项目部署上线(history) 前提准备 我们需要准备一个vue项目、一个nginx服务器 本教程讲解的是vue-router中history模式的部署 部署流程 配置vue.config.js中的publicPath 配置vue-router的模式为history 配置vue-router中的base（基态路由【与服务端配合】） 使用npm run build生成dist文件夹 配置nginx代理（进行生产环境下的反向代理，注意生产环境下devServer无效【或者你可以配置devserver
vue-router实现history模式配置
筑释科长的博客
02-09 1万+
一：概述 vue-router可以设置两种模式：hash和history const router = new VueRouter({ mode: "hash", // mode: "history", routes }); 如果使用hash模式，一般无需特殊配置； 但如果要使用history模式，则前端和服务端要做一定的设置； 使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务
Vue history路由模式配置及后台配置
CSDN_Hss的博客
06-26 7486
项目根目录文件夹名称：rootFile 一：后台配置： 1、Nginx： location ~ ^/rootFile/ { root F:/XXX; try_files $uri $uri/ /rootFile/index.html; } 二：Vue配置： 1、文件 router.js将 mode 设置成 history 模式，并设置base：rootFile（...
vueRouter history 模式配置
zaoxi6240的博客
05-28 2505
vue-router 前端路由系统： 改变视图的同时不会向后端发出请求。 hash 模式：域名/#/user/cart history 模式：域名/user/cart export default new VueRouter({ linkActiveClass: 'mui-active', mode: 'history', （默认为hash 模式） route...
vue-router history模式下 nginx配置
05-14 8914
背景 首先我们的前端是分成了 pc端 和 移动端 两部分，并非一个整体项目，但是目前网站域名只有一个，即 www.xxx.com 其次 pc端 项目是多页面项目，而移动端项目是基于 vue 的 SPA，所以 pc端 和 移动端的访问路径是不一样的 最后移动端的路由由 hash模式 更改为 history模式，此模式需要后端 nginx 支持 需求 当用户对网站进行访问的时候，动态读取客户端是pc...
vue history模式下面后端如何配置
sanlyshi's front-end road
01-02 6948
hash ——即地址栏URL中的#符号。 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。 history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持 history模式，会出现404 的情况，需要后台配置。 1、hash模式下，...
vue-router history模式前后端相应配置
qq_34295211的博客
03-06 2090
vue路由有hash和history两种模式。hash模式路由路径如下http://localhost:8081/#/about,history模式路由路径如下http://localhost:8081/about。 配置history模式前端需要在初始化路由实例的时候把mode设为history 本地运行效果如下： 此外服务器中的nginx配置文件中的l...
vue-router路由使用 history 模式时，后端SpringBoot如何配置
益达还有么的博客
04-25 1万+
当我们使用Vue开发时，一般会用到vue-router来作为前端路由，实现单页应用。vue-router提供了两种模式模拟一个完整的 URL：hash模式和history模式。 hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 //查看id为1的文章 http://localhost:8888/#/view/1 history...
记一次Vue使用History模式的踩坑
热门推荐
a1543070977的博客
01-05 1万+
Vue的History模式和Hash模式的区别 简单说Hash模式是会带有#号的，浏览器向服务端发送请求时，只会把#前的链接发送给服务端，所以后端同学并不需要处理，并且页面可以刷新不会返回404之类的恶心页面。是不是感觉很方便呢~ 但是这个#号往往会给我们来带一些奇怪的bug，比如生成二维码的时候会自动过滤掉#后面的参数啊，微信登录，已经分享的时候都会把#后面的参数或者路径都过滤掉，这样我们就很不...
IIS服务器配置vue-router history模式教程
"这篇文档详细介绍了如何在IIS服务器上配置vue-router的history模式，以实现没有‘#’符号的干净URL。" 在现代前端开发中，Vue.js是一款非常流行的JavaScript框架，它提供了vue-router作为其官方的路由管理库。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值