vue + nginx服务器+history模式多也i面路由正确配置

最新推荐文章于 2024-09-06 21:36:19 发布
原创 最新推荐文章于 2024-09-06 21:36:19 发布 · 1.4k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
2 篇文章 0 人学习
订阅专栏 查看详情
本文解决了Vue项目中使用Nginx服务器与history模式时遇到的问题，如F5刷新报错及首页显示不全等，并提供了详细的vue.config.js、router及nginx配置方案。

vue + nginx服务器+history模式多页面路由正确配置

问题介绍: 包括多个页面, 每个页面通过路由进行跳转, 发现配置history模式后, 出现一下问题

  1. f5刷新页面报错,找不到加载路径
  2. home页面无法完全显示.
    项目的路由和页面截图如下
    在这里插入图片描述
    在这里插入图片描述

解决方案如下

  1. 部署路径配置: vue.config.js
    在这里插入图片描述
  2. router路径配置:
    在这里插入图片描述
  3. nginx配置
    在这里插入图片描述
    在这里插入图片描述
  4. reload nginx问题搞定; f5刷新和调整问题得到解决
标签
#vue #nginx #history #路由 #刷新
在PLC中将十六进制数据转换为浮点数（通常遵循IEEE 754标准）需要理解数据存储格式，并按以下步骤操作：
最新发布
K11mvp的博客
02-18 4300
通过以上步骤，您可以在PLC中实现十六进制到浮点数的转换。T DBD20 // 将数据传送到浮点数变量（如DB1.DBD20）指数位（8位）：实际指数 = 存储值 - 127（偏移量）。：必须确认PLC的存储顺序（大端或小端），否则结果错误。将两个16位寄存器合并为32位数据，需注意。尾数位（23位）：隐含前导1，实际值为。：确保32位数据在寄存器中连续且对齐。符号位（1位）：0表示正，1表示负。：高位寄存器在前（如西门子PLC）。：低位寄存器在前（如三菱FX系列）。，误差因截断导致）。
Python+gensim【中文LDA】简洁模型
热门推荐
ArYe
10-16 2万+
文章目录完整代码过程详解words_lsdictionarydictionary.doc2bow函数corpuslda 完整代码 from gensim import corpora, models import jieba.posseg as jp # 待分析文本集 text1 = '美国教练坦言，没输给中国女排，是输给了郎平' text2 = '中国女排世界排名第一？真实水平如何，听听巴西和美...
nginx location 正则配置多个路由模块
qq_31455841的博客
11-13 2643
nginx location 正则配置多个路由模块
DirectX-v4.3增强版修复工具
DirectX修复工具(DirectX Repair)是一款系统级工具软件，简便易用。该程序的主要功能是检测当前系统的DirectX状态，如果发现异常则进行修复。程序主要针对0xc000007b问题设计。本程序中包含了最新版的DirectX redist(Jun2010)，并且全部DX文件都有Microsoft的数字签名，安全放心。程序为了应对一般电脑用户的使用，采用了易用的一键式设计，只要点击主界面上的“检测并修复”按钮，程序就会自动完成校验、检测、下载、修复以及注册的全部功能，无需用户的介入，大大降低了使用难度。在常规修复过程中，程序还会自动检测DirectX加速状态，在异常时给予用户相应提示。
Nginx多套环境配置及常见路由策略
wd520521的博客
06-24 4264
一、配置nginx 1、进入 nginx\conf 目录下，用文本编辑器打开 nginx.conf，对配置文件进行如下修改： （1）在 http 中增加 upstream，并配置两台环境的地址； #有几套环境，就配置几条 upstream pcservice{ server 10.101.137.244:8224 ; #节点1 server 10.101.137.245:8081; #节点2 } http..
Nginx配置和路由
qq_35059264的博客
07-16 9373
勿以浮沙筑高台 Nginx 高性能web服务器 Nginx安装 1.下载Nginx Nginx下载地址：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.18.0.tar.gz 2.安装Nginx需要的依赖环境 因为nginx是C语言编写的因此需要c语言环境 yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-d
Nginx下同域部署多个Vue项目（history路由模式），报404、500错误
hwijew的博客
04-11 6427
一、环境 系统: windows nginx: 1.20.2 nodejs: v10.24.0 npm: v6.14.11 @vue/cli: 4.5.13 二、问题描述 新建Vue项目的时候，如果选择hash模式的话，地址上都会带一个#号，本人嫌太丑，选择了history模式，到了部署项目的时候，刚好又需要多个项目部署在一起。部署完发现：① js、css文件找不到、② 页面报404、③ 页面报500。 三、解决方案 1、修改vue项目中的vue.config.js文件 a项目增加以下内容： module.
[vue-router] history模式下路同无法跳转
qq893182474的博客
03-07 5887
本地dev运行和build-nginx运行，vant的样式异常 和 组件van-popup 包 van-cascader 的弹框显示不出内容！ 出现此问题的上一步是因为项目中配置的cdn无法访问，导致界面加载混乱，所以将cdn的引入屏蔽。但是本地开发时，屏蔽了就导致vue-router报错，点击按钮跳转子路由时无反应，报错如下： 第一次突破，发现如果把屏蔽的cdn打开，就能正常点击了。 问题，但是这是做的移动端网站，手机上加载图书入库时，要选库位（van-popup 包 van-cascader
vue路由模式及 history 模式下服务端配置
csdn姚宏波
04-28 1万+
前言 vue 项目中，我们比较常用的模式为 hash 和 history 模式 默认情况下，vue 项目采用的就是 hash 模式 有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置 这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为 1. hash 模式 1.1 什么是 hash 模式 先从一个熟悉的锚标记案例开始，帮助大家理解 hash
Vue 项目hash和history模式打包部署与服务器配置
沐爸的博客
09-06 2514
Vue 项目的hash和history模式有什么区别？打包部署时如何设置？部署到服务器时，服务器该怎么配置？
在nginx上部署vue项目(history模式)；
zhoumeina99的博客
09-28 3158
route history模式为什么要重定向页面
history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
weixin_39753213的博客
12-19 1105
前言：根据标题我们要区分出两个信息1.history模式部署 ( vue的路由模式如果使用history，刷新会报404错误。)2. Nginx做反向代理问题1思考：vue-router默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网...
使用koa、Nginx处理vue项目的history模式
Minyoung 的博客
05-06 1596
使用koa处理vue项目的history模式 在vue项目的路由中默认是hash模式，又叫前端路由，根据浏览器url地址栏中的变化，使用onhashchange事件监听做出相应的操作，不会向服务器发送请求。但是若采用了history模式，就大大不同了，history不怕前进不怕后退就怕刷新，history模式是由浏览器提供的history api来处理。而且将vue项目（非ssr）打包后的静态资源...
Nginx：vue路由使用history模式刷新404
z69183787的专栏
11-08 3162
在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部的 URL 的指向。当vue-router使用history模式时，当我们刷新页面或直接访问路径的时候就会返回404，如图。使用 Nginx try_files。例子：根据上面的配置，当请求。
history模式 nginx配置_Nginx与Vue
weixin_30713183的博客
12-30 715
这篇文章主要是在说两个内容： 1. 如果编译后的vue不能通过 location / 来访问，必须通过 location /xxx 或者 location /xxx/xxx 这种方式访问，该如何配置vue和nginx。 2. 如何解决nginx配置完vue后，除了首页内容，其他页面点击浏览器刷新操作会出现空白页面。对于如何使用nginx作为服务器访问编译好的vue.js网上应...
完美解决vue在路由history模式下打包刷新报404（nginx）
a1983029606的博客
10-13 4225
history模式的配置方法 我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。 首先要将mode设置为history： const router = new VueRouter({ mode: 'history', routes: [...] }) nginx location / { try_files $uri $uri/ /index.html; } 然后就没了... 这里我们需要清楚为什么会报404： 我们用nginx部署项目，然后在地址栏..
Nginx部署vue项目history的路由模式（非根目录）
qq_28016751的博客
12-16 5171
vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。 而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。 这里我选用的是nginx服务器。 VUE项目(我的vue-cli版本4.x) 1. vue.config.js 2. router.js 3. nginx配置..
vue路由history模式_如何去除vue项目中的#
shenzhen_zsw的专栏
09-30 2634
在使用vue-cli搭建的环境中，浏览器上URL地址中是存在'#'的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式，例如: const router = new VueRouter({ mode: 'history', }) 对于VUE的router[mode: history]模式在开发的时候，一般都不出问题...
vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
qq_44552416的博客
01-10 6644
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
vue-router之hash与history，以及nginx配置
heyYouU的博客
06-26 2307
本篇讲解前端项目的路由模式（以vue-router为例），以及history模式下的项目部署问题解决。
Vue项目打包部署（history模式）
程麒阁的博客
10-19 7668
Vue项目部署上线(history) 前提准备 我们需要准备一个vue项目、一个nginx服务器 本教程讲解的是vue-router中history模式的部署 部署流程 配置vue.config.js中的publicPath 配置vue-router的模式为history 配置vue-router中的base（基态路由【与服务端配合】） 使用npm run build生成dist文件夹 配置nginx代理（进行生产环境下的反向代理，注意生产环境下devServer无效【或者你可以配置devserver
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值