vue打包发布流程,vue前端项目打包部署

　　本文主要介绍了vue.js项目打包上线的全过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue.js项目在线打包。这里我简单列举一下这个过程中vue.js打包后遇到的坑。打包后不渲染。路由模式：“历史”导致页面无法呈现。

vue.js项目打包上线

　　最近一直坚持每个月写一个小的vue.js开发项目。最后，开发完成后，我想到了一个很久以前回答给别人的问题：vue的项目是怎么上线的？当时有各种奇怪的答案。我在想，这些人都肿了吗？vue官方说这个框架只做视图层，所以不需要把这些开发的东西直接复制到服务器，需要打包成静态文件上传到服务器。

这里我简单的列出这个过程

　　首先，您需要在打包之前修改配置文件。很多人都遇到过包装后跑空白等问题。这些问题主要是路径问题，所以需要修改config:

　　上图中首先要修改的是静态文件的路径。打包后，静态文件在当前目录中，因此它被修改为。/

　　第二种是环境设置为生产环境。

　　修改后，打开cmd并运行以下命令进行打包：

　　注意下面的提示，告诉你这个打包好的文件需要放到服务器上才能打开，不能直接用浏览器打开。打包文件的结构如下：

　　这时，我们需要使用服务器来访问index.html。可能这里很多人也会遇到一些问题，比如proxytable，你在开发的时候可能会用到它来解决跨域的问题，这里就没有数据了。这个只能通过服务器自己解决。proxytable在这里只是为了方便你开发的跨域解决方案。

vue.js打包之后遇到的坑

　　最近，我正在用webpack vue写一个项目。连续几天熬夜加班修正bug，终于写完了基本框架。后面加一些小功能就好了。太好了！来npmrunbuild先打包！

　　包装.让我们用本地服务器打开它。

　　嗯，不看不知道。我一看，吓了一跳。坑那么多！但是作为一个积极的IT从业者，填补这个漏洞。

打包之后没有被渲染出来

　　发生了什么事？打开它告诉我什么都没有。这是某些事情的前奏！我们来看看错误信息，告诉我路径有问题。静静地看着你的地址栏和你的文件所在的目录。原来我打包的文件不在根目录下。这个时候我们可以把我们的两个文件放在根目录下，但是作为一个有个性的IT人，当然要看有没有其他的方式。从上面的路径，我隐约有一种预感，static是直接相对于根目录的，也就是说在可以打包的时候，可以设置一个绝对路径。如果我改成相对路径就没问题了。

　　我们来看一下项目文件下的configindex.js，在里面的build下找到assetsPublicPath:/，将其改为assetsPublicPath:。/，加点表示相对路径，不加表示绝对路径。npmrunbuild运行。成功。

路由（router）mode:history,导致页面不能渲染

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

　　在我们打包项目之前，在开发项目(npmstart)时，我们在vueRouter中设置了模式：“history”。您可以删除#符号。

　　这里强行解释一番：

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

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

　　Npmrunbuild正在打包。

　　搞什么鬼？为什么我的路由器没有渲染？这是历史的坑。第一种解决方案是，它将进入之前的哈希模式；解决方案2:在路由中设置路由名称。

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

　　这里有个小问题：

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

　　主页没有问题。一个一个测试。

　　这是什么鬼？路径和其他图像路径一样，图像也是存在的。你为什么这么骄傲？你只是报告了一个错误。看一下控制台。

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

　　这个时间是为了开发项目的可读性和可维护性。我只能默默地改变相对路径。/返回到绝对路径“/”。这太尴尬了，我们就当没看见吧！

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。