Vue Router History 模式配置打包部署线上 router-view 内容不显示的问题

router 配置

const router = new VueRouter({
  mode: "history",
  base: "/demo/", // 这里注意 看下面说明问题基本在这里
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

• base 属性 默认是 "/" 绝对路径 如果你的项目是在服务器的根路径下则无需配置
• 如果你的项目不是部署到服务器根目录, 则需要配置成服务器的子路径 此处以 demo 子路径为例

项目部署地址

webpack 配置

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './', // 这里还是相对路径和hash模式一致, 资源还是按照相对路径进行加载
 ...,
})