使用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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
js 替换
2008/02/19 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
2010/11/25 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python random模块用法解析及简单示例
2017/12/18 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
django2.0扩展用户字段示例
2019/02/13 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python学习笔记之多进程
2020/08/06 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
工作睡觉检讨书
2014/02/25 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
新学期教师寄语
2014/04/02 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
关于军训的感想
2015/08/07 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python