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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
express.js中间件说明详解
Mar 19 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
做一个有下拉功能的留言版
2006/10/09 PHP
php定界符
2014/06/19 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
django批量导入xml数据
2016/10/16 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
党委书记岗位职责
2013/11/24 职场文书
军训自我鉴定
2014/01/22 职场文书
生产部管理制度
2014/01/31 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
业务员岗位职责
2015/02/03 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Python数据结构之队列详解
2022/03/21 Python