vue hsitory部署

最新推荐文章于 2023-03-03 15:56:57 发布
原创 最新推荐文章于 2023-03-03 15:56:57 发布 · 388 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #history #nginx

本文介绍如何在使用Vue单页应用时避免除首页外的路由导致的404错误。通过在nginx配置文件中添加特定指令，可以使多层路由在刷新页面后仍能正确显示内容。

由于history路由基于的是h5的路由每次改变地址，浏览器都会重新请求资源，造成除了首页以外其他的路由都报404

我们只需要在nginx里面的nginx.conf添加如下可以正常访问

别忘记nginx -s reload 重启一下nginx

 

 

当我们有多层路由时，刷新页面如果空白的话

vue-cli2.

注意要把config/index.js 的assetsPublicPath：‘/’

Vue打包项目，并部署到Linux服务器中(详细过程)_vue项目部署到linux服务器
2401_83947105的博客
05-06 2551
最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
Vue框架部署、项目构建与后端交互详解
最新发布
2301_78150212的博客
12-30 1780
在Vue项目中，通过安装Vue Router并进行简单配置，可以实现路由的跳转和管理。本文将详细介绍如何部署Vue框架，进行项目构建，并深入讨论前后端交互的方法。文件），将模板、脚本和样式组合在一个文件中，使得代码更加模块化和可维护。Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue项目。在开发中，前端通常运行在不同的端口或域名下，需要处理跨域。Vue项目的目录结构是一个关键因素，有助于代码的组织和维护。文件），其中包含了模板、脚本和样式，使得组件的代码更加模块化和可维护。
vue 前后端 配置 hository 模式
weixin_43028853的博客
09-03 475
一 vue 前端配置hository 项目一开始的时候使用的是hash模式,但是hash模式小url需要带"#",看起来不舒服,而且还在某些场合小会破坏url ( 比如页面嵌入小程序,微信分享)所以就改用了history模式.前端这边只需要在router的文件夹下的index.js mode:'history'; 二 后端配置 我们使用的iis 服务 (后端没有搞过)于是就一起来搞得 首先需要安装 url rewrite 模块到iis https://www.iis.net/downl..
vue history 生产环境下nginx设置
weixin_30785593的博客
03-01 189
location /jxjy_app { root /home/wzh/jxjy; if (!-e $request_filename) { rewrite ^/(.*) /jxjy_app/index.htm...
Vue打包后部署NGINX，router mode history
weixin_39205240的博客
04-22 628
server { listen 80; server_name localhost; index index.html; root / root / dist; location / { root / root / dist; try_files $uri $uri / /index.html = 404 ; } }...
linux基本功之历史记录history命令实战
低调，谦虚，自律，反思，成长，保持热爱，奔赴梦想
01-11 5015
linux基本功之history历史记录
vue路由 history模式 nginx配置
m0_50015961的博客
03-03 5620
vue 路由history模式nginx配置
手把手教你实现Docker 部署 vue 项目
09-29
主要介绍了手把手教你实现Docker 部署 vue 项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
精选资源
docker容器化+k8s集群部署教程以及springboot+vue部署示例
04-11
本文介绍VMware虚拟机下centos7操作系统中如何安装云原生 Kubernetes（k8s）集群、k8s可视化界面kuboard，以及如何利用docker容器化将springboot+vue项目在k8s集群中部署运行。
精选资源
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
01-09
给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的，我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统，在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 ...
vue项目history模式刷新404问题
FGGIT的博客
02-01 7127
vue项目history模式刷新404问题
VUE history模式Nginx配置
小东东
06-02 2万+
Vue项目默认路由模式为hash模式，hash模式下url中会带有#号，子页面URL形式为:/mapp/#/subpage，经大神科普了解到，hash模式下页面跳转，只是刷新页面内容，页面整体并没有重新加载。 微信服务号网页授权访问需配置redirect_url，微信平台会在该URl后拼接?code=XXX&state=XXXX，若redirect_url为hash模式下的URL，微信平台...
vue history 模式（路由）
热门推荐
qq_41772754的博客
03-24 2万+
vue 里面路由有两种显示模式是hash和history，默认是hash hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重...
vue的history模式，页面刷新404，以及引入得第三方插件或者JS路径错误的解决办法
WebDestiny的博客
09-02 7640
在解决问题之前先让我们了解下vue中的hash模式和history模式： vue中的hash模式： hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = lo...
vue的两种路由模式：hash与history
二熊不是熊二的博客
09-18 305
hash模式 hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。 ​ 比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。 ​ hash模式背后的原理是onhashchange事件,可以在w...
vue-router 中mode，使用默认hash还是history模式？
沧笙踏歌的博客
04-28 1万+
官网hsitory模式说明 vue-router中默认使用的是hash模式，也就是会出现如下的URL： 参考1 各个模式区别 vue项目携带一个#会对开发造成一定的影响： 1、微信三方登录回调地址，有#号时，接收不到code参数 2、微信H5支付的回调地址，不允许有# 3、App分享，处理特殊字符时，可能会对#进行编译 4、有点影响美观 现在网站大多有三方登录，支付等功能，存在#，项目开发就存在...
Linux命令之history
zhaixing
11-21 4908
history history命令：用于显示历史记录和执行过的指令命令。 [root@localhost ~]# history 1 history 2 cat .bash_history 3 ls 4 history 格式 history: usage: history [-c] [-d offset] [n] or history -anrw [filename] or history...
vue去掉#，history模式
不求甚解的博客
08-14 2万+
一、vue项目携带一个#会对开发造成一定的影响： 1、微信三方登录回调地址，有#号时，接收不到code参数 2、微信H5支付的回调地址，不允许有# 3、App分享，处理特殊字符时，可能会对#进行编译 4、有点影响美观 现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。 二、去#的原理 vue把#当做自己的根目录，静态资源，比如图片。 去掉...
Vue项目部署难题与解决方案详析
本文主要探讨了Vue项目部署上线过程中可能遇到的问题及其解决方案，作者以自身的经验为基础，详细阐述了部署流程，旨在为读者提供实用的参考。以下是文章的关键知识点： 1. **服务器搭建**： - 作者选择腾讯云作为...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值