使用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中showModalDialog 的使用解析
Apr 17 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
深入了解query和params的使用区别
Jun 24 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静态新闻列表自动生成代码
2007/06/14 PHP
生成卡号php代码
2008/04/09 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
php命令行写shell实例详解
2018/07/19 PHP
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python实现列表的排序方法分享
2019/07/01 Python
python实现最大优先队列
2019/08/29 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
pandas数据处理之绘图的实现
2020/06/15 Python
什么是设计模式
2012/06/17 面试题
文员自我评价怎么写
2013/09/19 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
建筑项目策划书
2014/01/13 职场文书
法务专员岗位职责
2015/02/14 职场文书
安全员岗位职责范本
2015/04/11 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书