关于vue-router history配置注意的点

history 配置的两种配置方式

1.Hash 模式

hash 模式是用 createWebHashHistory() 创建，这种模式uri除了有些丑陋，部署没太大问题。

2.HTML5 模式

用 createWebHistory() 创建 HTML5 模式，官方推荐使用这个模式。
这种模式URL显示"正常"，但是由于vue是单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问非首页的其他路径，就会得到一个404错误。

3.服务器配置解决HTML5产生的问题

1.访问页面404问题

nginx

location / {
  try_files $uri $uri/ /index.html;
}
复制代码

Caddy v2

try_files {path} /
复制代码

Caddy v1

rewrite {
    regexp .*
    to {path} /
}
复制代码

Netlify

创建一个 _redirects 文件，包含在你的部署文件中：

/* /index.html 200
复制代码

这里只列出了几种常用的服务解决方式，其他方式请参阅官网

2.访问页面显示空白

方式一：

{
    path: '/sign-in',
    component: () => import('@/components/SignIn'),
    meta: { title: '登录' ,id: 'base' },

}
方式二：

import SignUp from '@/components/SignUp'
{
    path: '/sign-in',
    component: SignIn,
    meta: { title: '登录' ,id: 'base' },

}

复制代码

方式一异步加载首个组件导致页面空白，方式二正常。