vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录
- 问题一、 vue编译打包dist文件之后部署到线上服务器 ，访问页面却是空白？
- 问题二、如果不是空白，页面F5之后就又变成空白？
- 以Nginx服务器为例，（如下图FTP所示）
- `404报错：Not Found （先看截图）`
- 三、 相关阅读引入
按顺序，先说几个问题，着重的有思路的去分析和解决。
问题一、 vue编译打包dist文件之后部署到线上服务器 ，访问页面却是空白？
为什么？
因为你使用的路由是mode:history模式？！ 还是用Vue丑陋的hush的模式（vue默认路由模式）吧。
- css、js、images等等文件的引用路径都是正确可访问的路径。
- 本地wampserver环境配置，却是正常的效果！【因为node.js环境】
如果在Nginx中再次配置nodejs的话，也是非常坑不现实的！所以这个思路还是放弃吧。
问题二、如果不是空白，页面F5之后就又变成空白？
为什么？
- 非localhost的全部域名url地址，在F5刷新之后，页面都会直接
报错404！- 本地wampserver环境配置外加8080端口号后刷新，却是正常的效果！
看了上面的两处代码，就会发现：正常的路由跳转都是以网页的href跳转（浏览器可见的刷新动画效果那种）来实现的，但此处因为element-UI框架内置组件的方法，可以不用写正常的跳转方式，而是类似于tabs切换的那种效果。（如下图 ‘代码块一’ 的页面效果）。
这样就出现了上文的“问题二”描述的那样，F5之后，页面直接报错404，
以Nginx服务器为例，（如下图FTP所示）
在根目录下配置好文件之后（本案例是部署生产环境下），一切准备就绪之后，发现正常操作地址可以，一旦F5刷新页面（含域名的二级或二级以下地址），网页就会报错404（绝对域名地址刷新不会报错404），
这个是因为Nginx服务器页面执行F5操作相当于浏览器地址烂输入IP地址之后执行了enter，使得浏览器默认查找对应目录下的文件，所以没找到，就会报错404。这就是原因。
解决这个问题，就需要使用正常的路由浏览器跳转，这样正常。
404报错：Not Found （先看截图）
三、 相关阅读引入
- 推荐：vue打包后dist文件放在服务器出现空白页面解决方式
- webpack打包vue项目之后生成的dist文件该怎么启动运行
- vue + axios发送post请求，403错误的解决
- https://segmentfault.com/q/1010000008292792
以上就是关于“ vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇 ” 的全部内容。
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇相关推荐
- SpringBoot项目在eclipse中能运行，部署到服务器 nohup java -jar 方式运行就无法显示报错
SpringBoot项目在eclipse中能运行,部署到服务器 nohup java -jar 方式运行就无法显示报错: *************************** APPLICATION ...
- vue项目如何放到服务器上,Vue项目怎么上传到云服务器
Vue项目怎么上传到云服务器 内容精选 换一换 本章节以Linux操作系统为例,指导您通过弹性云服务器内网方式连接GaussDB(for Redis)实例.使用内网连接GaussDB(for Redi ...
- Nginx实战基础篇一 源码包编译安装部署web服务器
Nginx实战基础篇一 源码包编译安装部署web服务器 版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议 您可以自由复制.发行.展览.表演.放映.广播或通 ...
- nixyx —— 一个小巧的项目工程/编译文件生成器（构建系统？）
恩..nixyx确实算不上是一个构建系统. 所谓构建系统,比如GNU的Autotools,那是一套很完整的构建体系,包括了程序的配置,编译和安装三大部分. 类似的软件还有:google的gyp.腾讯的 ...
- 快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题 为什么打包后文件过大? 如何快速解决 一.路由懒加载[使用es6提案的import()方式] 二.CDN引入 为什么打包后文件过大? 移动app项目,使用vue- ...
- vue 项目在编译时，总是出现系统崩的状态，node 命令框也会报错，报错信息中有v7 或者 v8 的样式。
项目场景: 背景: vue 项目在编译时,总是出现系统崩的状态,node 命令框也会报错. 问题描述 问题: vue 项目在编译时,总是出现系统崩的状态,node 命令框也会报错,如下图:有v7 或者 ...
- 在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件 一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入 总结 一.css是什么? ...
- 解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因 艰难路程 解决办法 艰难路程 事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
- vue项目中使用vant时tabbar遮挡页面解决方法
标题vue项目中使用Vant时tabbar遮挡页面解决方法 单页面使用: 页面底部可以增加一个div,<div style="height: 5rem;"></d ...
最新文章
- PyTorch入门学习（二）：Autogard之自动求梯度
- kubernetes Helm
- 移动端 html2canvas 踩坑记录
- 解决Matplotlib图表不能在Pycharm中显示的问题：使用Anaconda
- 【Android 安全】DEX 加密 ( 阶段总结 | 主应用 | 代理 Application | Java 工具 | 代码示例 ) ★
- 帧、场编码的个人理解
- 【Python】青少年蓝桥杯_每日一题_10.27_日期差值的判断
- Paper：《How far are we from solving the 2D 3D Face Alignment problem? 》解读与翻译
- Nats的消息通信模型
- E - 娜娜梦游仙境系列——莫名其妙的插曲
- 如何计算CRC循环校验码示例
- 虚拟机centos7无法正常启动
- 经纬度转化为xy坐标系_Arcgis添加经纬度矢量点
- OA协同办公系统未来的趋势
- 2021-11-10
- 微信指数和其他平台的微指数有什么区别
- Spring boot后台搭建二集成Shiro添加Remember Me
- Warning: Leaking Caffe2 thread-pool after fork
- 练习：自撸整数进制转换器(二、八、十六进制转十进制)
- 计算机组成原理算术逻辑单元设计,计算机组成原理：带进位算术逻辑运算单元ALU设计实验.doc...