vue.js项目打包上线的图文教程
更新时间：2017年11月16日 10:52:04 作者：crazywoniu
下面小编就为大家分享一篇vue.js项目打包上线的图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近一直坚持每个月写一个小的vue.js 开发的项目，最后开发完成后想到很久之前给别人回答的一个问题：vue的项目如何上线，当时有千奇百怪的回答，我在想，这些人都是肿了么，vue的官方都说了，这个框架只是做了view这一层，所以并不是把这些开发完的东西直接拷贝到服务器上，而且需要打包为静态文件上传服务器的。这里我简单的列出这个过程：
首先需要修改一下配置文件再打包，很多人都是遇到过打包后运行一片空白等等问题，这些问题主要就是路径的问题，所以需要修改config下面的index.js这个配置文件里选项：
上图中第一个要修改的就是静态文件的路径，打包后静态文件就在当前目录下，所以修改为./
第二个是环境设置为生产环境
修改好后打开cmd运行下面的命令打包即可：
注意下面的tip，告诉你这个打包后的文件需要放到服务器才能打开，不能直接使用浏览器打开，打包后的文件结构如下：
这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题，比如大家可能在开发的时候使用的proxytable来解决跨域的问题，这里就会没有数据了，这个需要自己通过服务器在解决一下才可以的，proxytable在这里只是为了方便大家开发的跨域解决方案。
以上这篇vue.js项目打包上线的图文教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue elementui 动态追加下拉框、输入框功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-04-04
这篇文章主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在前端开发中,Vue.js 是一个非常流行的框架,因其易学易用而受到许多开发者的青睐,其中,组件是 Vue 的核心概念之一,组件之间的数据传递是开发中的常见需求,本文将探讨如何在 Vue 中实现父子组件之间的数据传递,需要的朋友可以参考下2024-11-11
这篇文章主要给大家介绍了关于在vue上使用cesium开发三维地图的详细过程,Cesium是一个强大的JavaScript库,支持三维地理信息展示,并提供了丰富的地理空间数据可视化功能,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue3封装简易的vue-echarts问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue3中实现文本显示省略号和tooltips提示框的方式详解
在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下2024-04-04
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
这篇文章主要介绍了用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,代码简单易懂，非常不错，具有一定的参考借鉴价值需要的朋友可以参考下2019-08-08
这篇文章主要给大家介绍了关于Elementui按钮设置默认选中状态的实现过程,文中通过图文以及示例代码介绍的非常详细,对大家学习或者使用Elementui具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于Vue动态组件和异步组件原理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
最新评论