Vue 项目布署后,刷新页面(或跳转页面)出现 404 解决办法
warning:
这篇文章距离上次修改已过187天,其中的内容可能已经有所变动。
解释:
这个问题通常发生在使用Vue Router和History模式时。当你的Vue应用程序部署到服务器上,并且你尝试通过URL直接访问或刷新页面时,服务器可能会尝试查找对应的路径文件,而这个文件在服务器上可能并不存在,导致返回404错误。
解决方法:
- 使用Vue CLI创建的项目,确保在
vue.config.js
文件中正确配置了publicPath
和outputDir
。 - 如果你使用的是Nginx或Apache等服务器软件,确保配置了正确的重写规则,使得对于Vue应用的路由请求都被重定向到入口文件(通常是
index.html
)。
对于Nginx的配置,你可以在server
块中添加以下内容:
location / {
try_files $uri $uri/ /index.html;
}
对于Apache的配置,你可以在你的vue.config.js
文件中添加以下内容:
module.exports = {
// ...
configureWebpack: config => {
config.devServer = {
historyApiFallback: true
}
}
}
- 如果你的服务器是用Node.js托管的,可以使用
express
的history
中间件:
const history = require('connect-history-api-fallback');
const express = require('express');
const app = express();
app.use(history());
// ...
确保你的服务器配置能够正确处理SPA(单页面应用)的路由。
评论已关闭