Vue项目npm run build打包后<router-view>无法默认渲染，开发环境正常如何解决

• 路由使用history模式时，生产环境直接用file://协议打开本地打包后的index.html：history模式依赖浏览器History API，仅支持在http/https协议下运行，且需要服务端配置路径重定向，本地file协议下路由匹配规则失效，无法命中/对应的默认路由，开发环境运行在本地http服务上所以不受影响。
• 路由实例未配置与publicPath匹配的base属性：生产环境publicPath设置为相对路径./，若路由根路径未对应调整，会导致路由匹配基准路径错误，无法命中默认路由规则。

方案一：切换为hash路由模式（无需服务端额外配置，适用大多数场景） #

将路由创建模式从history改为hash模式，hash模式通过URL #后的片段实现路由匹配，兼容file协议本地打开，无需服务端配置重定向。
Vue Router 3.x 版本修改示例：

const router = new VueRouter({
  mode: 'hash',
  routes
})

Vue Router 4.x 版本修改示例：

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

方案二：保留history模式的调整方式 #

如果业务需要使用history模式（如SEO要求），按以下步骤修改：

1. 禁止直接本地打开打包后的index.html，必须将产物部署到http/https服务下运行
2. 给路由实例配置与publicPath一致的base参数：
   Vue Router 4.x 版本示例：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

3. 部署服务端配置单页应用重定向规则，避免刷新出现404，以Nginx为例：

location / {
  try_files $uri $uri/ /index.html;
}

方案三：调整publicPath配置 #

如果项目不需要部署在站点二级目录下，可直接将vue.config.js中的publicPath改为/，配合上述路由配置即可生效。

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