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 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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实现paypal整合方法
2010/11/28 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
个人现实表现材料
2014/02/04 职场文书
阿德的梦教学反思
2014/02/06 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
实习生评语
2014/04/26 职场文书
志愿者宣传口号
2014/06/17 职场文书
源码安装apache脚本部署过程详解
2022/09/23 Servers