使用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 相关文章推荐
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
简单的js计算器实现
Oct 26 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 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
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue的for循环使用方法
2019/02/12 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python基于select实现的socket服务器
2016/04/13 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python机器学习之决策树算法
2017/12/22 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python str字符串转uuid实例
2020/03/03 Python
Python yield的用法实例分析
2020/03/06 Python
经贸日语毕业生自荐信
2013/11/03 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
租赁意向书范本
2014/04/01 职场文书
中学生演讲稿
2014/04/26 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
公司捐书倡议书
2015/04/27 职场文书
闪闪红星观后感
2015/06/08 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL
python计算列表元素与乘积详情
2022/08/05 Python