针对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 this指针
Jul 30 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
深入理解javascript prototype的相关知识
Sep 19 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
编译问题
2006/10/09 PHP
基于mysql的论坛(5)
2006/10/09 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
SVG描边动画
2017/02/23 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python入门之井字棋小游戏
2020/03/05 Python
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
加拿大留学自荐信
2014/01/28 职场文书
初中美术教学反思
2014/01/29 职场文书
爱国演讲稿400字
2014/05/07 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python