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 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
实例分析js事件循环机制
Dec 13 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
js实现筛选功能
2020/11/24 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Pandas之缺失数据的实现
2021/01/06 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
单位实习证明怎么写
2014/01/17 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
新教师培训心得体会
2014/09/02 职场文书
2015年检验科工作总结
2015/04/27 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python