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 相关文章推荐
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
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
php调用mysql数据 dbclass类
2011/05/07 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
详解Python爬虫的基本写法
2016/01/08 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
文员岗位职责范本
2014/03/08 职场文书
初三新学期计划书
2014/05/03 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
合作合同协议书范本
2015/01/27 职场文书
毕业证明书
2015/06/19 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书