vue路由设置history模式出现页面空白

正确使用方式

router-index.js

const router = new VueRouter({
  mode: 'history',
  routes: [...],
})

在路由的文件中添加mode: 'history',这行代码就就是更改为history模式，但是打包发布后，页面会出现一片空白。
如果创建的项目放到了根目录的话，不会出现这种问题。但一般情况下都不会放在根目录下，而是放在了子文件夹下面，此时你需要向后台询问子文件夹的名称，假如名称是ecm，那么你需要在路由中做以下配置。
router-index.js

const router = new VueRouter({
  base: '/ecm', // 基础路径
  mode: 'history',
  routes: [...],
})

添加完base: '/ecm',的设置后，访问路径会在后面多出/ecm，比如https://www.baidu.com/ecm。之前访问页面空白的原因则是因为路径不对，请求不到资源。

文档

history模式

网站导航

网站导航