使用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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
js中typeof的用法汇总
Dec 12 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
微信小程序实现人脸识别
May 25 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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调用数据库的存贮过程
2006/10/09 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP整合PayPal支付
2015/06/11 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python模块restful使用方法实例
2013/12/10 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
浅谈flask源码之请求过程
2018/07/26 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
django 模型中的计算字段实例
2020/05/19 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
个人党性剖析材料
2014/02/03 职场文书
爱国口号
2014/06/19 职场文书
信仰心得体会
2014/09/05 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
python Polars库的使用简介
2021/04/21 Python
python lambda 表达式形式分析
2022/04/03 Python