Vue3+Vue Router4动态路径生产环境404及Hash模式空白问题求助

一、createWebHistory模式动态路径404问题 #

Azure Storage静态网站默认不处理SPA的路由跳转逻辑，当直接访问/vehicles/:id这类子路径时，存储服务会尝试寻找对应物理文件，找不到就返回404。解决步骤：

1. 登录Azure Portal进入目标存储账户，找到「静态网站」设置项
2. 将「错误文档路径」设置为index.html并保存配置
3. 确认Vue项目打包时vue.config.js的publicPath配置正确（根目录部署设为'/'）：

   module.exports = {
     publicPath: '/'
   }
   

配置完成后，访问不存在的路径时Azure会返回index.html，由Vue Router接管路由匹配逻辑。

二、createWebHashHistory模式页面空白、生命周期钩子不执行问题 #

按以下方向逐一排查：

• 检查打包路径配置：确保vue.config.js的publicPath为'/'（根目录部署场景），错误的路径会导致js、css资源加载失败，直接引发页面空白。
• 验证路由配置正确性：确认createWebHashHistory的使用无错误（根目录部署无需额外参数）：

  const router = createRouter({
    history: createWebHashHistory(),
    routes,
  })
  

  同时检查路由数组是否包含必要路由（比如根路由/），动态路由的参数规则无语法错误。
• 确认Vue实例挂载流程：检查main.js中是否正确挂载路由与Vue实例：

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  
  createApp(App)
    .use(router)
    .mount('#app')
  

  并确保index.html中存在<div id="app"></div>挂载容器。
• 排查异步组件加载问题：暂时替换懒加载为同步导入组件测试：

  // 替换原懒加载代码
  import VehiclePage from "../components/management/Vehicles/VehiclePage.vue"
  
  const routes = [
    {
      path: "/vehicles/:id",
      name: "VehicleVehiclePage",
      component: VehiclePage,
      props: true
    },
    // 其他路由
  ]
  

  如果页面恢复正常，说明是懒加载的chunk文件上传失败或路径错误，需重新打包并上传所有静态资源。
• 查看浏览器控制台错误：打开开发者工具Console标签，检查是否存在资源加载失败、语法错误等信息，这类错误是导致页面空白的直接诱因。

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