今天这篇给大家分享的知识是“vue项目打包上线怎样做，有哪些要注意的”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“vue项目打包上线怎样做，有哪些要注意的”文章能帮助大家解决问题。

• vue.js项目打包上线
  

最近一直坚持每个月写一个小的vue.js 开发的项目，最后开发完成后想到很久之前给别人回答的一个问题：vue的项目如何上线，当时有千奇百怪的回答，我在想，这些人都是肿了么，vue的官方都说了，这个框架只是做了view这一层，所以并不是把这些开发完的东西直接拷贝到服务器上，而且需要打包为静态文件上传服务器的。

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

首先需要修改一下配置文件再打包，很多人都是遇到过打包后运行一片空白等等问题，这些问题主要就是路径的问题，所以需要修改config下面的index.js这个配置文件里选项：

上图中第一个要修改的就是静态文件的路径，打包后静态文件就在当前目录下，所以修改为./

第二个是环境设置为生产环境

修改好后打开cmd运行下面的命令打包即可：

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

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

vue.js打包之后遇到的坑

最近在用webpack+vue写项目，经过几天的熬夜加班改BUG，终于把基本的框架给写完了，后面只要加一些小功能就可以了，太好吧！先来npm run build 打包出来看看吧！

打包中...，我们用本地服务器打开看一下。

额，不看不知道，一看吓一跳，坑咋这么多呢！但是作为一名积极向上的IT从业者，填坑吧。

打包之后没有被渲染出来

怎么回事，刚打开就告诉我啥也没有，这是要搞事情的前奏啊！，我们看一下错误信息，告诉我路径有问题，默默的看一下自己的地址栏和自己的文件所在目录，原来是我的打包文件没有放到根目录下，这个时候我们可以把我们的两个文件放到根目录下，但是作为一名有个性的IT人士，当然要看有没有其他方法。从上面的路径中隐隐约约有点预感，static是直接相对于根目录，说明这有可能打包的时候，有可能设置了绝对路径，如果我改成相对路径，那不就可以了吗。

我们去看一下项目文件下的config>index.js找到里面的build下的assetsPublicPath:'/'，把它改成assetsPublicPath:'./'，加个小点表示相对路径，不加表示绝对路径。npm run build运行。成功。

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

地址栏的那个#怎么那么让我不舒服呢！对于有轻度强迫症的我来说，这是不能忍不了的。

我们在项目打包前，开发项目时（npm start），在vueRouter里设置mode:"history".可以去掉#号。

这里强行解释一番：

路由（router）默认 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，因为对于正常的页面来说，更换URl一定是会导致页面的更换的， 而只有更换URL中的查询字符串和hash值的时候才不会重新加载页面。

路由（router）的history模式，这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。没有#号。

npm run build打包中....

什么鬼，为什么我的路由（router）部分没有被渲染出来，这就是history的坑了，解决方法一，会到以前的hash模式；解决方法二，设置routes里的路由name。

这是因为路由（router）无法找到路径中的组件，所以也就无法渲染了。只需要修改 src > router > index.js，在每个path后加上组件名称就行了，这样就可以了。

这里有个小问题:

为了我们的时间考虑，还是放到根目录吧！

首页没有问题了，逐个链接测试一下。

这是什么鬼，路径和其他图片路径一样，图片也存在啊，为啥你就是这么傲娇，就是报错。来看一下控制台。

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

这个时候为了开发项目的可读性和维护性。只能默默的把前面改的相对路径'./'改回绝对路径'/'了。这就尴尬了，额额额，大家就当没看到哈！

以上就是关于“vue项目打包上线怎样做，有哪些要注意的”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue.$set失效问题怎么处理，有什么要注意的

  这篇文章主要介绍了Vue.$set 失效的坑 问题发现及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• Vue Router如何安装和配置，用法是什么

  Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用

• JS原生错误类型常见的有几种，是怎样的

  从浏览器控制台到运行 Node.js的终端，我们到处都会看到错误。本文的重点是概述我们在js开发过程中可能遇到的错误类型。

• JS中hasOwnProperty方法能用来做什么，怎么用

  这篇文章主要介绍了JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Map映射是什么意思，常用方法有哪些

  Map是ES6中新增的数据结构,Map类似于对象,但普通对象的 key 必须是字符串或者数字,而 Map 的 key 可以是任何数据类型,这篇文章主要给大家介绍了关于ECMAScript6中Map映射的基本概念与常用方法,需要的朋友可以参考下