Vue-Router构建模式无法渲染，开发模式运行正常求助

开发模式下路由正常，构建后用pnpm run preview预览时点击链接无法渲染对应页面，核心问题出在路由模式和预览服务器的配置上，给两个直接解决办法：

办法1：切换为Hash路由模式 #

修改src/router/index.js里的路由初始化代码，把createWebHistory换成createWebHashHistory：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'

const router = createRouter({
  history: createWebHashHistory(), // 替换原来的createWebHistory
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/test', name: 'Test', component: Test }
  ]
})

export default router

改完重新构建预览，路由就能正常跳转了，这种方式不需要额外配置服务器，兼容性拉满。

办法2：给预览服务器加History Fallback配置（适合坚持用History模式的场景） #

如果不想用Hash模式，就在vite.config.js里给preview服务加上historyApiFallback配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  preview: {
    historyApiFallback: true // 新增这行配置
  }
})

原理是让预览服务器把所有路由请求都转发到index.html，保证History模式下的路由能正确匹配组件。

效果对比 #

• 开发模式正常状态：
  
• 未修复时的构建预览异常状态：
  

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