我有一个在tomcat中运行历史模式的vue应用程序。访问www.mywebapp.com/faq或mywebapp.com/other或/后/99等它首先似乎运行良好。刷新页面似乎也很有效。
然而，当我在浏览器控制台中仔细查看时，我看到了一条错误消息。
"Failed to load resource: the server responded with a status of 404 ()"
页面在重定向我并加载页面之前，会在一瞬间返回404错误。
在非常慢的互联网连接上，404错误在加载之前会持续更长的时间。
有人知道我在这里缺了什么吗？我添加了以下代码来尝试处理它，但没有成功。
我的路由器是这样的：
export const router = new Router({
mode: 'history',
base: '/',
routes: [
{
name: 'home',
path: '/',
component: Home
},
....,
{
path: '*',
component: ErrorLanding,
name: 'NotFound'
},
],
scrollBehavior(to, from, savedPosition) {
return {x:0, y: 0}
}
});
router.beforeEach((to, from, next) => {
const publicPages = ['/', '/login', '/register',
'/help', '/ticket', '/about' ];
const authRequired = !publicPages.includes(to.path);
const loggedIn = localStorage.getItem('user');
const redirect = to.path;
if (authRequired && loggedIn === null) {
if(to.meta.authRequired === false) {
next();
}
else
next({ name: 'Login', query: { redirect: redirect } });
} else {
next();
}
});
我的vue.config.js看起来像这样：
module.exports = {
devServer: {
port: 80,
proxy: "http://localhost/*"
},
publicPath: process.env.NODE_ENV === 'production'
? '/'
: '/'
}
最后，我在dist/ROOT/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>my app</display-name>
<description>
this is my app description
</description>
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
</web-app>
更新
当我将这行代码添加到server.xml 时
<Valve
className="org.apache.catalina.valves.rewrite.RewriteValve"/>
并创建一个rewrite.config文件，将其添加到Catalina/localhost/带有此信息：
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html
它正在工作，我不再收到任何错误消息。但现在我有了一个新问题。通过Vuex填充的数组返回了无限循环。这怎么可能？
更新
我已尝试将其添加到rewrite.config文件中：
RewriteRule ^/api1/ - [L,NC]
RewriteRule ^/api2/ - [L,NC]
RewriteRule ^/api3/ - [L,NC]
RewriteRule ^/api4/ - [L,NC]
RewriteRule ^/api5/ - [L,NC]
RewriteRule ^/api6/ - [L,NC]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html
更新已解决必须将以下内容添加到rewrite.config文件中。
RewriteRule ^/myapi1/.* - [L,NC]
RewriteRule ^/myapi2/.* - [L,NC]
RewriteRule ^/myapi3/.* - [L,NC]
RewriteRule ^/myapi4/.* - [L,NC]
RewriteRule ^/myapi5/.* - [L,NC]
RewriteRule ^/host-manager/.* - [L,NC]
RewriteRule ^/manager/.* - [L,NC]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html
非常感谢@Michal Levy的帮助！！
问题是使用Vue路由器历史模式的结果，在文档中有很好的描述
当使用历史模式时，URL将显示为"正常，"；例如。http://oursite.com/user/id.然而，问题来了：由于我们的应用程序是一个单页客户端应用程序，如果没有正确的服务器配置，用户访问时会收到404错误http://oursite.com/user/id直接在他们的浏览器中。要解决这个问题，您所需要做的就是向服务器添加一个简单的包罗万象的回退路由。如果URL与任何静态资产都不匹配，它应该提供与您的应用程序所在的index.html页面相同的服务。
还有很多例子可以为许多服务器做这件事，而不是为Tomcat。。。
为了配置"；SPA回退"；(通用名称(在Tomcat中，您必须：
- 在
server.xml中配置重写阀
编辑~/conf/server.xml以在主机部分内添加以下阀门，如下所示：
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Host>
- 在
rewrite.config中写入重写规则
创建目录结构--~/conf/Catalina/localhost/，并在其中创建具有以下内容的rewrite.config文件：
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html
源
注意：请注意，上面的重写规则会导致您的服务器为任何不匹配的请求返回index.html；常规文件"；(请参阅重写阀门文档(。因此，如果您的服务器也提供某种API(例如REST(，则需要修改重写规则以避免将请求重写到API。
例如，如果您的API是在/api/...上提供的，那么您的重写规则应该如下所示：
# match any URL starting with `/api/`, do not rewrite and don't process other rules...
RewriteRule ^/api/ - [L]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html
@Michal Levys的答案是正确的，只是对我的情况进行了一些小的调整。为了解决这个问题，必须将下面的内容添加到rewrite.config中。
RewriteRule ^/myapi1/.* - [L,NC]
RewriteRule ^/myapi2/.* - [L,NC]
RewriteRule ^/myapi3/.* - [L,NC]
RewriteRule ^/myapi4/.* - [L,NC]
RewriteRule ^/myapi5/.* - [L,NC]
RewriteRule ^/host-manager/.* - [L,NC]
RewriteRule ^/manager/.* - [L,NC]
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/(.*) /index.html