使用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实现数组随机排序的方法
Jun 26 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
jupyter notebook实现显示行号
2020/04/13 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
优秀毕业自我鉴定
2014/02/15 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
查摆剖析材料范文
2014/09/30 职场文书
离职报告范文
2014/11/04 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL