1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。
2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。
这是打包后的，所以有 dist 文件夹，打包方式：npm run build。
这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404 无法引入的问题。
npm run build 打包后生成一个 dist 文件夹，这里面的目录：
我对 webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js, 因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。
接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中，只需要这两个。首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。
然后将文件夹放到 tomcat 中，我将文件夹放到 tomcat 的 webapps 文件夹目录下：
ok 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。
1、首先空白页的问题，可以重 f12 中看出来都是绝对路径的原因，而我们打包后，应该的引入路径是相对路径，这时我们需要的是修改 index.html 页面。
看一下没改之前的：
看我 /dist/build.js 引用的是绝对路径，这就导致了在 tomcat 去访问 index.html 页面时，报404。我们需要将路径变成相对路径 ./dist/build/。多一个点，很关键。好了到这里应该主页面可以显示了。
但是你会发现，我的静态资源，我的图片（不包括 img 形式的引入），例如我在 css 中 background:url() 的图片显示404。
2、解决静态资源失效的问题
这就需要修改我们的 webpack.config.js 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的：
可以看到我们的路径是： /dist/。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404：
http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573
- 1
显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的：
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573
- 1
看出区别了吗！
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
