vue3打包部署后，报错解决记录。访问页面index.html空白、页面刷新后nginx404问题

vue3打包部署后，访问页面index.html空白、页面刷新后nginx404问题

问题1：访问页面index.html空白，并且提示预加载的警告信息如下

The resource http://xxx.xxx/css/chunk-vendors.eed3e5ae.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

提示使用链接预加载的，但在窗口加载事件后的几秒钟内没有使用。请确保它有一个适当的as值，并且是故意预装的。推断页面空白就是有预加载的文件没有加载出来

解决方法

在webpack配置中（vue.config.js）配置chunks时通过加入[‘chunk-vendors’, ‘chunk-common’]参数来解决预加载问题，如下

// vue.config.js
{
  chunks: ['chunk-vendors', 'chunk-common']
}

问题2：打包部署后，界面可以正常的访问使用，但是刷新界面或者改变地址栏访问就会报nginx404问题

项目情况：使用的createWebHistory创建history达到访问路径不带#的效果，但是发现项目没有配置nginx转发，在vue-router文档中，配合createWebHistory使用需要nginx配置转发到index.html

解决方法

配置nginx转发，如下

localtion / {
  ...
  ...
  try_files $uri $uri/ /index.html last;
}