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 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php生成word并下载代码实例
2019/03/15 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
解决Python使用列表副本的问题
2019/12/19 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
统计员岗位职责
2013/11/14 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年护士长工作总结
2014/11/11 职场文书
个人工作能力自我评价
2015/03/05 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书