webpack打包vue项目之后生成的dist文件本地运行

最新推荐文章于 2024-07-16 14:46:22 发布
最新推荐文章于 2024-07-16 14:46:22 发布
阅读量3k 收藏 8
点赞数 1
分类专栏： 第三方插件 文章标签： vue.js webpack npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37214137/article/details/123472032
版权
通过npm run build命令，Vue项目会被打包到dist目录下，但直接打开index.html无法正常显示。为了解决这个问题，可以使用serve作为http容器。首先安装serve，然后在终端运行servedist命令，成功后即可在本地预览项目，提高测试效率。
摘要由CSDN通过智能技术生成

背景

每次项目修改后想要测试一下线上地址有没有问题都需要重新打包然后部署，使用第三方直接本地启动测试

项目打包

npm run build

命令会默认在vue项目的根目录下生成打包后的dist文件。

我们可以看到在dist目录下有一个index.html文件，我们直接在浏览器中打开是不能正常展示我们的项目效果的，这时候就需要我们安装一个http容器，让他在这个容器中执行。我们采用的是serve

安装serve

npm install serve --save
yarn add serve

项目启动

安装成功后，在终端输入serve dist,看到下图所示表示启动成功

周八营业的阿一
关注
专栏目录
Vue打开动态html页面,解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题...
weixin_42506911的博客
06-03 885
解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题2020年07月11日|萬仟网IT编程 |我要评论问题描述vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成...
如何运行webpack打包的vue项目之后的dist文件
qq_35165469的博客
06-15 3083
1、打包vue项目：npm run build会生成一个dist文件 express是一个基于node.js平台的web开发框架 2、安装express、express-generator npm install express -g npm i express-generator -g 3、创建expressDemo项目 express exp...
前端打包运行dist的三种方法
最新发布
missCheney的博客
07-16 900
前端运动部署dist的三种方法总结
webpack打包后的vue项目如何在本地运行
暴力扬
12-04 994
执行 进行安装执行 （smartCampus是项目名）这是创建好的项目目录进入项目根目录，即我上图截图目录，安装相关依赖 运行项目 访问 localhost:3000即可 注：如需修改端口号，打开my-express-project\bin\www文件，如下图：
启动运行webpack打包vue项目之后生成的dist文件
snailmar的博客
12-14 1509
好吧,看到搜索的人还比较多,提供一个官方简单的方法 npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
本地运行vue的dist文件
qq_40068304的博客
05-23 1561
1、全局安装express-generator npm install express-generator -g 2.项目初始化(这里把项目名设置为server) express -e server 3.进入项目根目录cd server → npm i 安装依赖 → npm start 运行 4.将dist中文件复制到server 中 public文件中 5、浏览器输入http://localhost:3000查看项目 ...
webpack打包 生成JOSN格式配置文件 dist根目录生成
cyf的博客
11-10 722
大家在日常开发上线，上预发，测试环境的时候，一定遇到过不同环境，配置项不同的情况，比如不同的环境部署的代码一致，只有Host需要配置不同。这个时候，如果每次都要重新修改代码，不仅显得不专业，也容易在提交的时候忘记这个配置，提交错误就是上线灾难。所以，有必要在打包后的文件中生成配置文件，供在外部修改配置。本篇就是为了解决这个问题而写~~ 这要用到一个webpack插件generate-asset-webpack-plugin Install npm install --save-dev generat
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包...总之，Webpack 打包 Vue 项目后生成的 `dist` 文件需要部署到服务器才能正确运行，通过结合 Express.js 可以快速搭建一个简单的服务器环境，实现打包后 Vue 项目的本地预览或线上部署。
使用webpack打包后的vue项目如何正确运行（express）
10-17
Vue 项目经过 Webpack 打包后，通常会生成一个 `dist` 文件夹，其中包含构建后的 HTML、CSS 和 JS 文件。但是，直接通过浏览器打开这个 HTML 文件可能会遇到问题，因为静态资源的引用路径可能由于跨域或文件系统访问...
vue挂载运行webpack打包好dist的文件
大雾起了清晨
05-10 890
const express = require('express') const app = express() const port = 8012 // 自定义端口号（不要与已存在端口冲突） app.use(express.static('dist')) // dist 是项目的打包资源路径 app.listen(port, () => console.log(`服务器 ${port} 开启成功!`)) 1.首先得node环境里面 项目环境下安装express cnpm install exp.
vue2项目打包dist文件后如何部署访问（本地部署和网络部署）
张羽的博客
06-28 5157
前提：1.注意端口的占用，防火墙的放行；2.注意后端服务的请求链接3.记得不要关闭运行4.记得element ui的引入要放在vue版本导入的后面。
前端vue项目使用dist文件调试说明（附安装包）
陈建华的博客
06-17 1623
前端vue项目使用本地dist文件调试说明（附安装包）
vue修改server路径带dist问题
Alistring的博客
05-29 616
webpack server 开发vue时会发现url会带上dist，例如：http://localhost:8080/dist/index 我们可以打开vue.config.js文件，然后把publicPath的值改成 / 后重新编译重启 npm run build npm run serve Url中的dist已经没有了
运行vue项目打包后的dist文件夹
诸事顺利
04-30 709
npm install -g serve(全局安装) serve -s dist(运行打包后的文件)
启动dist文件serve
qq_45184152的博客
02-15 1233
怎么本地运行vue dist文件，最简单的方法
CherryCola_zjl的博客
04-16 5498
在dist文件夹运行serve~~ npm i -g serve cd /dist serve
如何运行vue打包后的dist文件夹下的项目
Redamancy的博客
11-11 676
1.需要安装http-server 通过npm install -g http-server 进行全局安装 2. 通过命令行进入到dist文件夹 运行http-server，这样就可简单的本地启动一个服务了。
五、webpack项目打包发布（配置、整理dist目录下的文件）
m0_45382009的博客
02-12 2395
为什么要打包发布（生产环境打包）？ 开发环境下，打包生成的文件存放于内存中，无法获取到 开发环境下，打包生成的文件不会进行代码压缩、性能优化 配置： package.json 中新增build命令： "scripts":{ "dev":"webpack serve",//开发环境下，运行npm run dev "build":"webpack --mode production",// 项目发布时，运行npm run build 得到dist文件夹，此处的production生产模式会覆盖webpa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值