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 相关文章推荐
如何将php数组或者对象传递给javascript
Mar 20 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现字典依据value排序
2016/02/24 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python实现识别手写数字大纲
2018/01/29 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
计算机实训心得体会
2016/01/14 职场文书
关于做家务的心得体会
2016/01/23 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL