vue项目打包部署到linux tomcat服务器,解决一刷新就报错404问题

1.部署到服务器前,更改webpack配置,修改index.js中以下配置
在这里插入图片描述2.运行npm run build 或者cnpm run build命令,打包完成后,在项目的根目录dist文件下生成了如下文件:
在这里插入图片描述3.tomcat的webapps创建文件夹:这里以文件夹名“demo”示例
将static文件夹和index.html复制到demo文件夹,不出意外,这个时候浏览器输入:http://服务器IP:tomcat端口号/demo 已经可以打开首页了,但是发现页面中的路由访问不了,其他页面都打不开,如下配置路由即可。
在这里插入图片描述4.这个时候页面的其他路由可以正常使用了,但是除了首页,一刷新浏览器,出现404错误,解决方式:在tomcat webapps下项目demo文件夹下新建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">
	<error-page>
		<error-code>404</error-code>
		<location>/index.html</location>
	</error-page>
</web-app>

直接复制过去,其他不用改,再次刷新,404问题解决。
5.font-awesome访问失败,icon无法显示,继续修改build/util.js
在这里插入图片描述再次打包,重新部署,这时候项目可以正常访问了。

以上记录vue项目编译打包部署到linux服务器的过程以及填坑过程,仅供大家参考!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章