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 , 就可以看到效果了

webpack打包vue项目之后生成的dist文件该怎么启动运行的更多相关文章
- vue 项目之后生成的 dist 文件该怎么在本地启动运行
简单高效 npm i -g servecd distserve
- 如何做到在webpack打包vue项目后,在外部动态修改配置文件
在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- 解决webpack打包vue项目后,部署完成后,刷新页面页面404
1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...
- webpack打包vue项目之后怎么启动&注意事项
参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- 教你用Cordova打包Vue项目
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
随机推荐
- Linux命令对应的英文全称
su:Swith user 切换用户,切换到root用户cat: Concatenate 串联uname: Unix name 系统名称df: Disk free 空余硬盘du: Disk u ...
- 关于 OpenIdConnect 认证启用 HTTPS 回调 RedirectUri 不生效问题
在搭建 IdentityServer 服务端后,我们尝试使用了 OIDC(OpenID Connect) 的中间件来代替了原先的 Session 系统认证方式,起初采用的是 HTTP 协议,一切都没有 ...
- 一口一口吃掉Hexo(五)
如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 通过前四节的内容,相信你已经能够在你的虚拟主机上成功部署网站,并且能够通过你自己的域名访问你的网站了,接下来要做的就是日 ...
- 全网最详细的zkfc启动以后,几秒钟以后自动关闭问题的解决办法(图文详解)
不多说,直接上干货! 问题详情 情况描述如题所示,zkfc启动以后,几秒钟以后自动关闭. 解决办法: 1.检查下每台机器的时间是否同步: 2.检查下每台机器的防火墙是否关闭: 3.查看zkfc的日志路 ...
- CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
- HTTP笔记(二)
HTTP首部 不管是请求报文还是响应报文,都会包含首部信息.HTTP首部都是由字段名和字段值构成的,中间由英文冒号:隔开.一个首部字段名可以对应多个字段值. 四种首部字段的类型: 通用首部字段:请求报 ...
- [Golang] GOROOT、GOPATH和Project目录说明
go env环境查看 用go env 可查看当前go环境变量. $ go env GOARCH="amd64" GOBIN="" GOEXE="&qu ...
- 技术笔记5 MINA 和事务
Java NIO框架MINA用netty性能和链接数.并发等压力测试参数好于mina. 特点:1.NIO弥补了原来的I/O的不足,它再标准java代码中提供了高速和面向块的I/O原力的I/O库与NIO ...
- POJ 2349 Arctic Network(最小生成树中第s大的边)
题目链接:http://poj.org/problem?id=2349 Description The Department of National Defence (DND) wishes to c ...
- 邂逅jQuery
jQuery是一个流行的JavaScript库,提供了HTML操作,CSS操作,事件,动画,Ajax和常用插件,极大地简化了JavaScript的开发. 可以从jquery.com下载jQuery库, ...