然后将文件夹放到 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
看出区别了吗!
解决:
所以我需要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去,这样就可以将静态资源引入进项目了。
ok,到现在为止,最主要的两个问题解决了,一个是 index.html 空白页,另一个是 静态资源路径不正确的问题。
6、index.html 页面中的link 和 srcipt 引用的资源失效问题:
原因还是路径的地址不对:
妥协的解决方法是:将自己引用的资源手动放到打包出来的 dist 文件夹内,然后在 index.html 中按照 dist 的相对路径进行引用。
代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中,然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。
文末
如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。
同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript