使用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 相关文章推荐
简略的前端架构心得&&基于editor为例子的编码小技巧
Nov 25 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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 文件系统详解
2012/09/13 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
python安装以及IDE的配置教程
2015/04/29 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
奥巴马演讲稿
2014/01/08 职场文书
负责培养人意见
2015/06/05 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
Redis Lua脚本实现ip限流示例
2022/07/15 Redis