详解webpack打包vue项目之后生成的dist文件该怎么启动运行


Posted in Javascript onSeptember 06, 2019

亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。

我的vue项目结构如下:

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置)

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

执行成功如下图所示:

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件。

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到。

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

2. 安装express-generator生成器

执行  $ npm install express-generator -g  进行安装

3. 创建一个express项目

执行  $ express expressDemo (expressDemo是项目名)

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

expressDemo项目目录如下图:

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

4. 进入expressDemo目录,安装项目依赖

$ cd expressDemo                                        
$ npm install
                                                                              

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

5. 把dist目录下的所有文件复制到express项目的public文件夹下

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

然后运行 $ npm start 启动expressDemo

打开浏览器,输入 http://localhost:3000 , 就可以看到效果了

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JS中数组重排序方法
Nov 11 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 #Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 #Javascript
layui 弹出删除确认界面的实例
Sep 06 #Javascript
vue-cli3跨域配置的简单方法
Sep 06 #Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 #Javascript
对layui中的onevent 和event的使用详解
Sep 06 #Javascript
You might like
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP实现货币换算的方法
2014/11/29 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Node.js编码规范
2014/07/14 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Python3基础之基本运算符概述
2014/08/13 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
快速入门python学习笔记
2017/12/06 Python
Django如何自定义分页
2018/09/25 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
九年级物理教学反思
2014/01/29 职场文书
生物工程专业求职信
2014/09/03 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
会议新闻稿
2015/07/17 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android