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 最近浏览过的商品的功能实现代码
May 14 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
js的2种继承方式详解
Mar 04 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
Vuex模块化应用实践示例
Feb 03 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP 日期加减的类,很不错
2009/10/10 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python将数组n等分的实例
2019/12/02 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书