使用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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
angular directive的简单使用总结
May 24 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
微信小程序选择图片控件
Jan 19 Javascript
javascript实现固定侧边栏
Feb 09 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP开发文件系统实例讲解
2006/10/09 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python验证码识别实例代码
2018/02/03 Python
python实现简单图片物体标注工具
2019/03/18 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python 如何对logging日志封装
2020/12/02 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
学校安全工作制度
2014/01/19 职场文书
车辆转让协议书
2014/04/15 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP