针对Vue路由history模式下Nginx后台配置操作


Posted in Javascript onOctober 22, 2020

前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下

location / {
  root html;
  index index.html index.htm;
  try_files $uri $uri/ @rewrites;
 }
 location @rewrites {
  rewrite ^(.+)$ /index.html last;
 }

经测试,可以正常访问

补充知识:Vue History 模式下 整合Nginx部署踩坑过程

在公司部署Vue项目期间,因Vue的Router下的Hash模式的#号太过于难看,就去把模式改为了history模式,谁想打包后出现了无尽的深渊,各种问题浮现:

问题一:

通过history模式打包后,部署到nginx服务器内出现了,无法路由的问题,页面展示空白页,

之前用hash模式直接用nginx部署采用查询root方式直接跳转,hash模式下没出现过问题,但是

此处的history模式直接就展现了空白页,无法进行路由,查看了官网说明:

针对Vue路由history模式下Nginx后台配置操作

解决办法:

针对Vue路由history模式下Nginx后台配置操作

此处我采用了Nginx服务器进行配置:

文档配置:

针对Vue路由history模式下Nginx后台配置操作

我的配置:

针对Vue路由history模式下Nginx后台配置操作

我使用的根目录为 /v/maintain/

Vue-Cli 3.0修改根目录的方法:

针对Vue路由history模式下Nginx后台配置操作

针对Vue路由history模式下Nginx后台配置操作

修改完根目录后需要修改 Router 的base目录:

针对Vue路由history模式下Nginx后台配置操作

那么完美解决白屏无法路由问题。

以后有问题还是要以官方文档为主,百度很多说明都比较笼统,不细化。

好啦~这篇针对Vue路由history模式下Nginx后台配置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 #Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 #Javascript
记一次vue跨域的解决
Oct 21 #Javascript
解决Vue项目中tff报错的问题
Oct 21 #Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 #Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 #Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 #Javascript
You might like
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Prototype String对象 学习
2009/07/19 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python多线程与多进程及其区别详解
2019/08/08 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
物流创业计划书
2014/02/01 职场文书
寄语十八大感言
2014/02/07 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
建议书的格式
2014/05/12 职场文书
法院执行局工作总结
2015/08/11 职场文书