使用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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
微信小程序模版渲染详解
Jan 26 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
JS highcharts实现动态曲线代码示例
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相对当前文件include其它文件的方法
2015/03/13 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
python之Socket网络编程详解
2016/09/29 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python读取Kafka实例
2019/12/23 Python
JSF如何进行表格处理及取值
2012/08/06 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
关于赌博的检讨书
2014/01/08 职场文书
党员承诺书内容
2014/03/26 职场文书
《桥》教学反思
2014/04/09 职场文书
运动员口号
2014/06/09 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
西双版纳导游词
2015/02/03 职场文书
谢师宴学生致辞
2015/07/27 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS