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四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
Sort()函数的多种用法
Mar 20 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php中namespace use用法实例分析
2016/01/22 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
laravel入门知识点整理
2020/09/15 PHP
用js重建星际争霸
2006/12/22 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
简单谈谈Python中的闭包
2016/11/30 Python
Python自动发邮件脚本
2017/03/31 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
十月份红领巾广播稿
2014/01/22 职场文书
环保项目建议书
2014/08/26 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
迟到检讨书
2015/01/26 职场文书
签字仪式主持词
2015/07/03 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL