vue 打包后的文件部署到express服务器上的方法


Posted in Javascript onAugust 09, 2017

vue 简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发。

1、首先用vue-cli初始化项目目录

vue init webpack pro-name 
cd pro-name && npm install 
npm run dev

看到127.0.0.1:8080端口出现vuejs的欢迎界面表示成功。

到这里,前端vue的部署就完成了。

2、安装部署express

npm install express body-parser  --save 
然后在项目的根目录添加app.js 作为启动express服务器的代码

const express = require('express') 
const app = express() 
app.use('/',(req,res) => { 
 res.send('hello express!') 
}) 
app.listen(3000,() => { 
 console.log('app listening on port 3000.') 
})

执行:node app.js

打开浏览器访问127.0.0.1:3000,出现“hello express” 者说明express部署成功

3、对vue进行打包

执行:npm run build

打包后的文件存放于dist文件夹中,vue经过webpack打包之后生成dist文件夹,里面有个index.html,他是前端页面和服务端的对接页面。

4、修改app.js

在express中加入app.use(express.static(path.join(__dirname,

 'dist')));app.js 代码如下:

const express = require('express') 
const path = require('path') 
const app = express() 
app.use(express.static(path.join(__dirname, 'dist'))) 
app.listen(3000,() => { 
 console.log('app listening on port 3000.') 
})

5、启动express

在启动express之前,需要修改packge.json 里面的配置:

"scripts": { 
 "dev": "node build/dev-server.js", 
 "build": "node build/build.js", 
 "server": "nodemon app.js", 
 "start": "node app.js" 
 },

然后执行:npm run start

此时就可以通过127.0.0.1:3000访问到vue的欢迎界面了。

总结

以上所述是小编给大家介绍的vue 打包后的文件部署到express服务器上的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
详解Vue底部导航栏组件
May 02 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 #Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 #Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 #Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 #Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 #Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 #Javascript
You might like
WordPress网站性能优化指南
2015/11/18 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
js定时器实例分享
2016/12/20 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python递归函数特点及原理解析
2020/03/04 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
六十岁生日答谢词
2014/01/10 职场文书
骨干教师培训制度
2014/01/13 职场文书
教师申诉制度
2014/01/29 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
法律意见书范文
2015/05/20 职场文书