使用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中Eval函数的使用说明
Oct 11 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
详解vue axios中文文档
2017/09/12 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
详解package.json版本号规则
2019/08/01 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
利用Python开发实现简单的记事本
2016/11/15 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Django分页功能的实现代码详解
2019/07/29 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python Timer 类使用介绍
2020/12/28 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
应聘教师自荐信
2013/10/12 职场文书
大学信息公开实施方案
2014/03/09 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
学校安全生产承诺书
2014/05/23 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
计算机教师工作总结
2015/08/13 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Python 线程池模块之多线程操作代码
2021/05/20 Python