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下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
Javascript实现字数统计
Jul 03 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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
短波收音机简介
2021/03/01 无线电
php短域名转换为实际域名函数
2011/01/17 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Python引用传值概念与用法实例小结
2017/10/07 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
详解django三种文件下载方式
2018/04/06 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
中文专业毕业生自荐信
2014/05/24 职场文书
企业理念标语
2014/06/09 职场文书
员工生日活动方案
2014/08/24 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
平安家庭事迹材料
2014/12/20 职场文书