详解webpack打包vue项目之后生成的dist文件该怎么启动运行
更新时间：2019年09月06日 10:56:08 作者：音浪豆豆_Rachel
这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。
我的vue项目结构如下：
1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置)
执行成功如下图所示：
然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。
此时我们直接在浏览器中打开index.html，是会报错的，什么都看不到。
2. 安装express-generator生成器
执行 $ npm install express-generator -g 进行安装
3. 创建一个express项目
执行 $ express expressDemo （expressDemo是项目名）
expressDemo项目目录如下图:
4. 进入expressDemo目录，安装项目依赖
$ cd expressDemo $ npm install
5. 把dist目录下的所有文件复制到express项目的public文件夹下
然后运行 $ npm start 启动expressDemo
打开浏览器，输入 http://localhost:3000 , 就可以看到效果了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue+elementUI el-input输入框手机号校验功能
这篇文章主要介绍了Vue+elementUI el-input输入框手机号校验功能,限制input框内只能输入数字,且为11位,通过实例代码介绍了对输入手机号做校验的方法,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了手把手带你封装一个vue component第三方库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
atom-design(Vue.js移动端组件库)手势组件使用教程
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue3实现组件拖拽实时预览功能,对于组件拖拽预览,用户可以在含有各种功能组件的列表中,选择需要的组件进行拖拽,需要的朋友可以参考下2023-12-12
vue对插件(iview,elementui,treeselect)样式的局部修改方式
这篇文章主要介绍了vue对插件(iview,elementui,treeselect)样式的局部修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
详解vue2.0+vue-video-player实现hls播放全过程
这篇文章主要介绍了详解vue2.0+vue-video-player实现hls播放全过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最近工作遇到个需求,表单可以进行增加删除操作,需要进行表单校验,这篇文章主要给大家介绍了关于elementUI动态嵌套el-form表单校验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-06-06
本文主要介绍了以element-ui基础封装大文件上传的组件,包括断点续传,秒传,上传进度条,封装思想逻辑来源于el-upload 组件源码,文中有具体案例分享,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue3之 Vue CLI多环境配置，通俗点说就是使用配置文件来管理多环境，实现环境的切换，西阿棉详细内容,需要的朋友可以参考一下2021-11-11
最新评论