vue.js打包后可能遇到的坑！

前言

最近，我在用webpack vue写一个项目。经过几天的加班加点的工作，修正bug，终于写完了基本框架。稍后只需添加一些小功能。太好了。让我们先来看看npm运行构建。

在包装过程中.我们用本地服务器打开看看。

嗯，不看不知道，但是看到就震惊了。为什么会有这么多坑？但是作为一个积极的IT从业者，填补这个漏洞。

1.包装后未呈现

这是怎么回事？打开的时候告诉我什么都没有。这是某事的前奏！让我们看看错误消息，告诉我路径有问题。让我们看看我的地址栏和我的文件所在的目录。事实证明，我打包的文件没有放在根目录中。这个时候我们可以把我们的两个文件放在根目录下，但是作为一个有个性的IT人，当然要看有没有其他的方法。从上面的路径来看，有一种轻微的预感，静态是直接相对于根目录的，这意味着当有可能打包时，就有可能设置一个绝对路径。如果我把它改成相对路径，那么就可以了。

让我们看看项目文件下的configindex.js，找到assetpublicath :’。/'在“生成”下，将其更改为AssetsPublicPath3360。/'，并添加一个小点来指示相对路径，而不是绝对路径。运行npm运行构建。成功。

2.路由器模式为：“历史”，导致页面无法呈现的问题

地址栏的#让我很不舒服！对于患有轻度强迫症的我来说，这是无法忍受的。

在项目打包和开发(npm启动)之前，我们在vueRouter中设置了mode:“历史”。#符号可以移除。

这里有一个强行的解释：

路由(路由器)默认的哈希模式，使用URL的哈希来模拟一个完整的URL，所以当URL发生变化时，页面不会被重新加载，因为对于普通页面来说，改变URL肯定会导致页面替换，但是只有当URl中的查询字符串和哈希值发生变化时，页面才不会被重新加载。

路由器的历史模式，充分利用history.pushState API完成URL跳转，无需重新加载页面。#没有#。

打包npm运行版本.

什么鬼，为什么我的路由器部分没有渲染，这是历史的坑，第一个解决方案会去之前的哈希模式；解决方案2:在路线中设置路线名称。

这是因为路由器找不到路径中的组件，所以无法渲染。只需修改srcrrouterindex.js，并在每个路径后添加组件名称。

这里有个小问题，

为了我们的时间，把它放在根目录！

主页没什么问题。一个一个测试。

这到底是什么？路径和其他图片路径一样，图片是存在的。你为什么这么骄傲，就是说你报错了。看看控制台。

结合前面的。/原来是相对路径问题，是我开发文件资产下的多个图片文件夹。

这一次是为了开发项目的可读性和可维护性。你只能默默地改变相对路径。/'在返回绝对路径“/”之前已更改。太尴尬了，还是算了吧！

我暂时遇到了这些坑，这是我自己写项目的感觉，希望对看过这篇文章的人有所帮助。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。