Vue项目上线后刷新报错404问题(apache,nginx,tomcat)
一、 Vue项目打包发布apache报错:
route,配置一个覆盖所有的路由情况
1、需要修改router/index.js中new Router 配置,加一个base: '/htcm_front/', 它指定应用的基路径,该应用是服务于localhost/htcm_front路径下,所以必须加base配置,否则应用会展示404页面
2、需要修改config/index.js中build下的assetsPublicPath: '/htcm_front/',如果用相对路径,chunk文件会报错找不到。
3、将项目打包发布到apache的/var/www/html/下的htcm_front目录(htcm_front是打包生成的目录)
后端配置例子(apache配置文件):
4、修改httpd.conf文件,开启rewrite_module功能。
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
,去掉前面的#
5
、找到AllowOverride None
的那行,把它改成AllowOverride All
,来使.htaccess
文件生效。
6
、在你的项目目录下,也就是我的front目录添加一个.htaccess文件。
Vim .htaccess
#.htaccess
内容#
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /htcm_front/index.html [L]
</IfModule>
注:/htcm_front/ index.html是你打包目录的名字
参考地址:https://segmentfault.com/a/1190000012548105
二、 Vue项目打包发布nginx报错:
(官方文档也有介绍)
https://blog.csdn.net/tomcat_2014/article/details/53129796
#HTML5 History模式:
VUE-router默认hash模式---使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。
如果不详很丑的hash,我们可以使用路由的history模式,这种模式充分利用history.pushState API来完成URL跳转而无需重新加载页面。
const route = new VueRouter({
mode:‘history’,
routes: […]
}]
当你使用history模式时,URL就像正常的url,列入http://test.com/user/id。也好看。
这种模式还需要后台支持,因为我们的因该是个单页客户端应用,如果后台没有正确配置,当用户浏览时就会返回404。
所以,你要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源,则因该返回同一个index.html,这个页面就是你app依赖的页面。
后端配置例子,修改nginx配置文件:
这里配置location的时候要注意一下:
root写自己tomcat/webapps的路径
proxy_pass 写跳转后的地址,比如我这里是ip地址:端口号 ,注意后面不要加
这么写之后,就能实现vue的刷新功能了。
附Nginx常用命令:
启动
./nginx
检查 nginx.conf配置文件
./nginx -t
重启
./nginx -s reload
停止
./nginx -s stop
三、Vue项目打包发布tomcat报错:
遇到的问题:
使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错。
在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html
但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解。
解决方案:
根据官方给出的解决方案原理
你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
所以在tomcat服务器下你可以这么做。在打包好的项目根目录下新建一个WEB-INF文件夹,在WEB-INF中写一个web.xml。
<?xml version="1.0"
encoding="UTF-8"?>
<web-app xmlns="
http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="
http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<display-name>Router for
Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
这样的目的就是一旦出现404就返回到 index.html 页面。
最后还需要配置一下你的route,配置一个覆盖所有的路由情况,然后在给出一个 404 页面。
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '*',
component: (resolve) => require(['./views/error404.vue'], resolve)
}
]
})
以上所述是小编给大家介绍的Vue项目webpack打包部署到apache,nginx,tomcat刷新报404错误问题的解决方案,希望能帮助到您。
Vue项目上线后刷新报错404问题(apache,nginx,tomcat)相关推荐
- 接上一篇:【Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined】
上一篇:Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined 其实在修改 webpack.prod.co ...
- vue项目dist编译文件部署到服务器:页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录 问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
- 为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题 参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
- 启动项目报错404 Not Found nginx/1.21.5-2022-6-8
启动项目报错404 Not Found nginx/1.21.5 换了个工作地址后,再启动项目,页面显示404. 初步估计是nginx的配置文件出问题,但是之前都是能运行的,换了个地点就出错了,只能硬 ...
- 解决Vue项目在iOS 10 报错 “Cannot declare a let variable twice: ‘r‘”
问题描述 如下图所示,H5页面在iPhone7P及IPhone5c(iOS 10)手机上打开白屏,使用vconsole查看报错原因是Cannot declare a let variable twic ...
- Vscode的vue项目中下滑红线报错问题
Vscode的vue项目中下滑红线报错问题 1.报错原因 代码存在语法错误(错误并不影响项目的编译运行),并且校验功能是开启状态就会出现下滑红线的报错. 2.解决方法 1)关闭校验 如果项目的校验功能 ...
- vue项目部署后刷新网页报404错误解决
我的项目,前端是vue项目在部署之后可以正常访问,流程没有问题,可是刷新之后浏览器会返回404错误. 部署使用的是nginx,经常用来部署项目,所以容器肯定没有问题, 这种问题在我直接启动时并没有出现 ...
- vue项目中的一些报错解决方法
1.mixed spaces and tabs no-mixed-spaces-and-tabs 禁止使用空格和tab混合缩进:大多数代码约定要求使用空格或 tab 进行缩进.因此,一行代码同时混有 ...
- vue项目 IE浏览器打开报错:strict 模式下不允许一个属性有多个定义
VUE项目,用IE浏览器打开,浏览器报错:strict 模式下不允许一个属性有多个定义 出现这种报错,往往是代码标签里面有重复的属性,之前在Chrome下打开一直是正常的,但是换成IE11版本会报错, ...
最新文章
- vue+elementui搭建后台管理界面(登录)
- “天猫精灵”如何为你写诗?人机共创的秘密在这儿
- 一口气说出 6种 延时队列的实现方法,面试官也得服
- 微信内置浏览器中实现点击电话号码自动到拨号页面
- Oracle递归查询所有树结构,并确定其中的一条分支
- redis java客户端封装_redis的java客户端Jedis简单封装
- matlab调用函数画图,matlab画图之pcolor函数
- Java实习日记(2-1)
- 数据分析面试都会问到哪些问题
- 【数据结构】栈的应用--括号匹配的检验
- php解析bt,php读取BT文件信息lightbenc.php库使用说明
- 做一个人脸识别相关的毕业设计
- 迅雷【任务配置文件错误,无法继续下载】解决方法
- linux apple开发环境,Linux上构筑iPhone OS3.1.2开发环境 实例操作
- sql 纵向求和_SQL语句求和语句该怎么编写?有几种方法?
- Gboard键盘词库导入方法
- 浅谈技术管理之团队管理
- 【ACWing】587. 吃蛋糕
- 离散数学课本上的最短路径算法
- 向世界问好,.NET 5 从 Fur 框架开始,v1.0.0.rc2 发布
热门文章
- 中国过氧化二异丙苯市场投资状况分析与前景趋势研究报告2022年版
- 500台网吧设计方案实验--基于华为模拟器
- 3D展示框架SDK全面开放
- 密西西比河谷州立大学:Android应用程序开发(二)
- LabVIEW编程LabVIEW开发控制PACE1000精密压力测试仪例程与相关资料
- Help Hanzo(素数筛)
- 南充计算机职业学校有哪些专业,南充旅游计算机职业中专学校2020年招生简介...
- 163邮箱怎么开通注册?公司邮箱格式选择,可以邮箱注册微信吗?
- 刷题、面试必备网站(java)
- clappr:可扩展网页媒体播放器使用(在vue中的使用)