项目部署后发现的问题

• 首次打开css文件很大，加载很慢白屏时间长          

原因：导入组件太多

解决办法：按需引入组件

• 导航栏menu组件刷新后高亮回到默认选项

原因：路由刷新后状态会丢失

解决办法：用pinia对路由状态做长久保存，将保存的路由赋值给默认高亮

• 刷新页面出现404

原因：history路由模式在刷新时会通过地址栏里的url向后端请求页面，而vue时单页面应用，在nginx上只有index文件，所以会返回404。在history模式下是通过h5的Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能，但当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向服务器发送请求，因此history模式正常页面操作跳转路由，是不会再次发送http资源请求的。但是当刷新的时候，由于url已经改变，如www.xxx.com/login会完整地向服务器请求相关资源，所以就会造成对应路径的资源找不到，从而返回404。

解决办法：

采用hash模式，hash模式使用onHashChange检测地址栏#后面的变化从而改变页面，#后面的内容不会影响url请求。

对nginx进行重定向配置。在配置文件里增加下面代码

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

ps:在解决过程中出现了一个小bug，上述代码会按照：当前$url，当前$url文件中的内容中即$url/，/index文件一步步查找，前面都不符合才会选择最后的index文件。在该项目中有一个publiccations路由页面，同时在打包的public文件中创建了一个publications文件保存pdf文件，当按照上述顺序查找时，在publications路由页面刷新就会误把存放pdf文件的publications文件夹当成$url/的匹配项，导致了页面403无法正常访问。

解决办法：去掉$url/ 或者更改publications文件夹的名字