vue.js项目打包上线的图文教程


Posted in Javascript onNovember 16, 2017

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

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

vue.js项目打包上线的图文教程

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

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

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

vue.js项目打包上线的图文教程

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

vue.js项目打包上线的图文教程

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

以上这篇vue.js项目打包上线的图文教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
在node中如何使用 ES6
Apr 22 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Three.js基础学习教程
Nov 16 #Javascript
three.js实现3D视野缩放效果
Nov 16 #Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python+django实现简单的文件上传
2016/08/17 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
学习十八大报告感言
2014/02/04 职场文书
考试作弊检讨书
2015/01/27 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书