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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
Validform表单验证总结篇
Oct 31 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Vue组件中slot的用法
Jan 30 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 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
摩卡咖啡
2021/03/03 咖啡文化
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php发送post请求函数分享
2014/03/06 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python实现字符串加密成纯数字
2019/03/19 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python可以用哪些数据库
2020/06/22 Python
python 如何停止一个死循环的线程
2020/11/24 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
部队2015年终工作总结
2015/04/02 职场文书
同学会演讲稿
2019/04/02 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python