Vue.js部署Netlify后刷新页面及路由跳转出现404错误

问题原因 #

你用createWebHistory()开启了Vue Router的HTML5历史模式，开发环境下Vue的dev-server会自动把所有路由请求转发到index.html，但Netlify作为静态文件服务器，当你直接刷新/about、/user-edit/1这类路径时，服务器会去查找对应目录或文件，找不到就返回404。

快速解决方案 #

在项目根目录创建一个名为_redirects的文件，内容只需要一行：

/*    /index.html   200

把这个文件加入版本控制，重新部署到Netlify即可。这个规则会让Netlify把所有请求都转发到index.html，交给Vue Router去处理路由匹配。

其他配置方式 #

如果你用Vue CLI或Vite，可以在项目配置里自动生成这个文件：

• Vue CLI：在vue.config.js中添加：

  module.exports = {
    chainWebpack: config => {
      config.plugin('copy').tap(args => {
        args[0].push({
          from: '_redirects',
          to: '_redirects',
          toType: 'file'
        })
        return args
      })
    }
  }
  

• Vite：在vite.config.js中添加：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { copyFileSync } from 'fs'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      rollupOptions: {
        output: {
          onwrite: () => {
            copyFileSync('_redirects', 'dist/_redirects')
          }
        }
      }
    }
  })
  

另外，也可以在Netlify后台的Site settings > Build & deploy > Post processing > Redirects rewrites里手动添加这条规则，效果和本地创建_redirects文件一致。

额外建议 #

你路由里有重复的路径配置（比如/reset和/resetpassword/），可以合并成一个避免冗余；动态路由/user-edit/:id也会被上述规则正确处理，不用担心参数丢失。

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