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;
}

你可能感兴趣的:(vue,报错处理,JS,html,webpack,前端)