使用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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP输出缓存ob系列函数详解
2014/03/11 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
srcElement表格样式
2006/09/03 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Django分组聚合查询实例分享
2020/04/29 Python
Python如何重新加载模块
2020/07/29 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
师范生自荐信范文
2013/10/06 职场文书
审计主管岗位职责
2014/01/31 职场文书
小学作文评语大全
2014/04/21 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
经理岗位职责
2015/02/02 职场文书
南湾猴岛导游词
2015/02/09 职场文书
客房领班岗位职责
2015/02/11 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
JS封装cavans多种滤镜组件
2022/02/15 Javascript