Vue2.0如何发布项目实战


Posted in Javascript onJuly 27, 2017

大家好,这节我们主要讲解项目的发布,其实很简单,没有大家想的那么复杂,具体如下操作。

一、创建VUE项目

首先我们需要创建VUE项目,创建项目的代码如下:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

项目截图如下:

Vue2.0如何发布项目实战
项目截图

二、项目打包

在打包之前需要修改一个地方,那就是config->index.js文件,修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下:

Vue2.0如何发布项目实战
index.js文件

//上面文件改好后,开始打包,执行如下命令:
npm run build

Vue2.0如何发布项目实战打包后的截图

打包后,项目目录下会生成dist文件夹,这就是我们的整体项目。如图所示:

Vue2.0如何发布项目实战
dist文件夹

三、发布

最后一步就简单了,直接把 dist 目录丢到服务器就可以了,是不是很简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 #Javascript
vue 怎么创建组件及组件使用方法
Jul 27 #Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 #Javascript
Vue中如何实现轮播图的示例代码
Jul 27 #Javascript
基于构造函数的五种继承方法小结
Jul 27 #Javascript
vue中各组件之间传递数据的方法示例
Jul 27 #Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
You might like
优化PHP代码技巧的小结
2013/06/02 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python os模块学习笔记
2015/06/21 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python测试模块doctest使用解析
2019/08/10 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
2019销售早会主持词
2019/06/27 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
MySQL 覆盖索引的优点
2021/05/19 MySQL