使用webpack打包后的vue项目如何正确运行(express)


Posted in Javascript onOctober 26, 2018

我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?

倘若直接打开html文件,会报如下错误:

使用webpack打包后的vue项目如何正确运行(express)

那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行。

(1)、安装express-generator生成器。

npm install express-generator -g // 也可使用cnpm比较快 

(2)、创建一个express项目。

express expressName // expressName是项目名

(3)、进入项目目录,安装相关项目依赖。

 cd expressName

npm install // 或cnpm install

(4)、此时生成的项目目录应该是这样的:

使用webpack打包后的vue项目如何正确运行(express)

(5)、将dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行npm start来启动express项目。

(6)、打开浏览器,输入localhost:3000就可以看到效果了。例如我的是这样的: 

使用webpack打包后的vue项目如何正确运行(express)

总结

以上所述是小编给大家介绍的使用webpack打包后的vue项目如何正确运行(express),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
深入理解javascript中的this
Feb 08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
详解ES6 系列之异步处理实战
Oct 26 #Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 #Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 #Javascript
js使用formData实现批量上传
Mar 27 #Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 #Javascript
js自定义input文件上传样式
Oct 26 #Javascript
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python数据存储之 h5py详解
2019/12/26 Python
浅谈django channels 路由误导
2020/05/28 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
半年思想汇报
2013/12/30 职场文书
年度考核自我鉴定
2014/03/19 职场文书
施工单位安全责任书
2014/07/24 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
大学生学期个人总结
2015/02/12 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技