针对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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
JQuery live函数
Dec 24 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
php数组添加元素方法小结
2014/12/20 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python实现的特征提取操作示例
2018/12/03 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
校园安全广播稿范文
2014/09/25 职场文书
家长学校教学计划
2015/01/19 职场文书
旅游项目合作意向书
2015/05/08 职场文书
在人间读书笔记
2015/06/30 职场文书
工商局调档介绍信
2015/10/22 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书