vue本地运行没有问题,服务器上404——history路由的配置问题
这是我在打包的时候遇到的一个问题,在此进行记录。在此,再次感谢vue社区大佬的帮助。这个问题是这样的,vue本地用npm run serve是没有任何问题的,但是当我使用npm run build以后将打包好的dist放到服务器的tomcat以后,浏览器输入http://localhost:8080/dist/,无法显示内容。百度说将mode: ‘history’去掉,去掉以后http://loc
这是我在打包的时候遇到的一个问题,在此进行记录。在此,再次感谢vue社区大佬的帮助。
这个问题是这样的,vue本地用npm run serve是没有任何问题的,但是当我使用npm run build以后将打包好的dist放到服务器的tomcat以后,浏览器输入http://localhost:8080/dist/,无法显示内容。百度说将mode: ‘history’去掉,去掉以后http://localhost:8080/dist/确实可以显示内容,但是我用a标签进行页面跳转的时候,会404。这里我找到了两种解决办法:
- 第一种:我们不用a标签,之前a标签的代码如下
<a-icon slot="icon" type="arrow-right" style="margin-right: 10px;"/>
<a :href="item.url">{{ item.title }}</a>
- 我们替换为
<router-link :to='item.url'>
<button v-text="item.title"></button>
</router-link>
-
这种方式其实就是投机取巧,因为如果将跳转之后的页面的url复制,再次打开,还是不行的。接下来介绍第二种方式
-
第二种:也就是vue社区大佬帮忙解决的,这种方式是在本质上修改了。产生上述问题的主要原因是history路由需要服务器的支持。换句话说,我们需要修改服务器的一些东西,那根据不同的服务器,也有不同的配置。大佬给出的链接中介绍的是nginx服务器,我使用的是tomcat服务器。关于原理性的东西,可以参考大佬给出的链接,里面介绍的比较详细,这里就不班门弄斧了。tomcat的配置可以参考这个链接,因为害怕这位博主的链接失效,我下面简单的整理一下。
-
第一步:在dist中创建文件夹WEB-INF
-
第二步:在WEB-INF中创建文件web.xml
-
第三步:加入一下内容
-
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true">
<display-name>webapp</display-name>
<description>
webapp
</description>
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
</web-app>
更多推荐
所有评论(0)