Vue3+Vite项目部署后刷新白屏问题的解决方法

// vite.config.js
export default defineConfig({
  base: '/this/is/a/path/', // 该路径必须与部署目录完全一致
})

const router = createRouter({
  history: createWebHistory('/this/is/a/path/'), // 与 Vite base 配置一致
  routes
})

location /this/is/a/path/ {
  # 指向打包后的目录
  alias /your/project/dist/;
  try_files $uri $uri/ /this/is/a/path/index.html;
  
  # 开启 gzip
  gzip on;
  gzip_types text/plain application/xml application/javascript text/css;
}

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /this/is/a/path/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /this/is/a/path/index.html [L]
</IfModule>

// vite.config.js
export default defineConfig({
  build: {
    assetsDir: 'static', // 将资源分类到 static 目录
    rollupOptions: {
      output: {
        assetFileNames: 'static/[name]-[hash][extname]'
      }
    }
  }
})

// vite.config.js
export default defineConfig({
  base: process.env.NODE_ENV === 'production' 
    ? '/this/is/a/path/' 
    : '/'
})

// router.js
const router = createRouter({
  history: createWebHistory('/this/is/a/path/'),
  routes: [
    // ...
    { 
      path: '/:pathMatch(.*)*', 
      component: () => import('@/views/404.vue')
    }
  ]
})

// main.js
if (import.meta.env.PROD) {
  const expectedBase = '/this/is/a/path/';
  const currentPath = window.location.pathname;
  
  if (!currentPath.startsWith(expectedBase)) {
    window.location.replace(expectedBase);
  }
}