使用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 相关文章推荐
图片之间的切换
Jun 26 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JS提交form表单实例分析
Dec 10 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
JS的深浅复制详细
Oct 16 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
PHP 程序员的调试技术小结
2009/11/15 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
个人应聘自我评价分享
2013/11/18 职场文书
文员岗位职责范本
2014/03/08 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015年话务员工作总结
2015/04/29 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis