2024年最新vue项目如何打包扔向服务器 - Hi-Sen - 博客园(2)，2024年最新面试技巧书籍推荐

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

ok 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。

5、解决空白页和静态资源无法引入的问题。

---

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 引用一样。

7、待解决的问题：

---

1、在我的项目中，使用了 ElementUI 框架，但是在打包放到服务器中后，发现按钮样式变了，所有的 padding 失效，所有我只能自己手动进行添加样式。

2、在我的 index.html 中如果引入 link css文件时，还是没办法引入相对路径，所以我将 css 样式都放到了各自的组件中的 style 中了，其他的一般都是用 npm 注入依赖的形式进行安装。

8、网上搜索到的相关问题和解决方法。
总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；