使用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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php 高效率写法 推荐
2010/02/21 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
js实现前端图片上传即时预览功能
2017/08/02 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
使用python接入微信聊天机器人
2020/03/31 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
django 模型中的计算字段实例
2020/05/19 Python
Python新手学习raise用法
2020/06/03 Python
python批量修改文件名的示例
2020/09/27 Python
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
中层干部岗位职责
2013/12/18 职场文书
工作睡觉检讨书
2014/02/25 职场文书
《开国大典》教学反思
2014/04/19 职场文书
警示教育活动总结
2014/05/05 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
毕业赠语大全
2015/06/23 职场文书
任命书格式范文
2015/09/22 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android