Vue.js项目部署Netlify后直接访问路由出现404的解决咨询

先排查_redirects文件的核心问题 #

• 确认文件位置：Vue 3放在public目录，Vue 2放在static目录，打包后必须出现在dist文件夹的根目录，不能嵌套在子文件夹里。如果放错位置，Netlify读不到规则。
• 检查格式正确性：/* /index.html 200 里的分隔符必须是单个空格，不能用多个空格或制表符，Netlify对这个格式要求很严，格式错了规则直接失效。

改用netlify.toml配置（更可靠） #

如果_redirects一直不生效，换用Netlify的配置文件试试：
在项目根目录创建netlify.toml，写入以下内容：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

这个格式比_redirects更规范，不容易出格式错误，Netlify会自动识别该文件。

检查Vue Router的配置 #

• 确保路由模式是history（如果用hash模式不会有这个问题，但history模式需要服务器重定向支持）。
• 如果站点部署在Netlify的子路径下（比如your-site.netlify.app/blog/），要在router/index.js里设置base属性：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // Vue 3
  // Vue 2写法：mode: 'history', base: process.env.BASE_URL
  routes: [...]
})

同时在vue.config.js里配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-subpath/' : '/'
}

避免重定向后路由解析出错。

验证Netlify后台的规则加载情况 #

部署完成后，进入Netlify站点后台：

1. 打开Site settings -> Build & deploy
2. 找到Post processing下的Redirects rewrites
3. 查看是否加载了你的重定向规则，如果没有，说明打包时配置文件没被正确复制到dist根目录，检查Vue的打包配置是否包含public/static目录的文件。

注意测试环境 #

不要在本地开发服务器测试Netlify的重定向规则，本地dev server的路由处理逻辑和Netlify服务器不同，必须部署到Netlify后再测试路由直接访问的情况。

内容的提问来源于stack exchange，提问作者MercX