一.问题描述

使用vue-cli创建的的项目,开发过程中无任何问题,在开发完成后准备打包上线,此时打包也无任何问题。然而打包后使用Tomcat发布时却出现了白屏问题。

二.原因探索

1.打开控制台

查看network,显示的都是各类资源404的报错,那很显然是资源路径错误。注意,下图中的资源路径没有拼接项目名。(使用本地Tomcat测试)
在这里插入图片描述

2.资源路径尝试

为了确认第一步的猜想,我们可以手动加上项目名来访问资源文件,然后很顺利的发现资源找到了。

在这里插入图片描述

三.解决方案

1. 快速方案

使用过tomcat的小伙伴应该都记得tomcat中内置的ROOT项目,我们可以直接使用localhost/ip +端口号打开,无需输入项目名。因此,直接将打包后的文件改名为ROOT即可解决路径不对的问题。

2. 完美方案

根目录中创建vue.config.js文件,示例代码如下

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/newScreen/' // 打包后发布文件名
    : '/' // 开发环境相对路径
}

对应以上代码,打包后的包名必须为newScreen。

3.其他

第三种方案相对前两种肯定较为复杂,但是我们已经知道了问题出现的原因,那之后的解决方案也就简单了,说白了就是将项目的默认访问根目录变为当前项目名下,请各位小伙伴自行探索,这里偷个懒~。

  • 后期遇到较为优雅的解决方案还会更新

tip:vue-cli:版本为4.1.1

如遇到vue-cli版本不同导致解决方案不生效的问题欢迎给我留言

END

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐