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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
兼容Mozilla必须知道的知识。
Jan 09 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 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/10/15 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
jQuery live
2009/05/15 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
百度地图api如何使用
2015/08/03 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python中super函数用法实例分析
2019/03/18 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
数据库连接池的工作原理
2012/09/26 面试题
我的小天地教学反思
2014/04/30 职场文书
先进个人材料怎么写
2014/12/30 职场文书
店铺转让协议书
2015/01/29 职场文书
病危通知单
2015/04/17 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Hive导入csv文件示例
2022/06/25 数据库