如何在本地访问构建后的dist前端页面文件

原创 已于 2025-09-15 11:27:32 修改 · 167 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

于 2025-09-15 11:25:37 首次发布

1 安装live-server

npm install -g live-server

2 启动服务

进入到打包后的dist文件目录，执行live-server命名。

访问http://127.0.0.1:8080/即可以看到页面。

在这里插入图片描述

在这里插入图片描述

Vue项目打包后的dist文件夹如何本地预览？Node服务+局域网访问全攻略 vue项目打包预览、静态服务、express部署、局域网访问、node本地服务、vue打包dist目录预览
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
07-19 184
作为前端开发工程师，我经常遇到这样的问题：“Vue 项目打包完之后，怎么在本地像线上一样预览效果？很多小伙伴直接打开，结果发现页面白屏、路由失效、样式乱掉，这其实是因为 Vue 项目打包后依赖的是服务环境，而不是简单的打开 HTML 文件。今天我就手把手教你，如何用启动一个静态服务来预览打包后的dist目录，并且支持手机等设备通过局域网访问调试。Vue 项目打包后，不是直接打开就能用的，而是需要运行一个真正的服务环境。通过简单的，我们就能轻松实现本地和局域网的静态部署预览。用。
【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包
m0_74825634的博客
12-25 1219
本文主要讲一下在Linux系统环境下（以ubantu22.04为例），如何用nginx部署前端Vue项目打包的dist静态资源。有些具体的命令就不展开讲了，可以自行查看其他博主的文章，我主要讲整体的步骤和思路。
让dist包跑起来！
m0_72030584的博客
05-25 1327
前端应用部署攻略：让dist包跑起来！
vue打包后访问dist
lml_little的博客
02-02 785
vue打包，vue打包后访问dist文件
前端提供的dist包(Vue.js)在本机如何启动运行
王声声的博客
04-15 9283
一、搭建环境 node.js环境（npm包管理器） cnpm npm的淘宝镜像 express-generator构建工具 1. 安装node.js环境（npm包管理器） 从node.js官网下载并安装node.js。安装完成之后，打开命令行工具，输入node -v，如下图，如果出现相应的版本号，则说明安装成功。 npm包管理器已经在node中集成， 再接着输入npm -v 可看到npm版本...
前端——在本地搭建Vue单页应用
web18285482512的博客
12-25 818
多数情况下，至少应该选择 Babel 和 Linter / Formatter 来确保项目的基本质量和跨浏览器兼容性。其余的选择则根据项目的规模、复杂性和开发团队的技术栈来决定。当你使用历史模式时，服务器需要配置，以确保在任何路由路径下刷新页面时，能够正确地加载你的单页面应用（SPA）。（在生产环境中需要正确设置服务器以支持索引回退）Vue CLI 是一个官方提供的工具，用于快速搭建和管理 Vue 项目。此命令执行一次就行了，不必每次创建新项目时都执行一次。），然后让前端路由接管处理页面的加载和路由切换。
nginx 本地部署前端打包编译后项目
small_cutey的博客
12-08 1974
nginx，vue项目本地部署
后端 Maven打包 JAR 文件、前端打包dist文件、后端集成部署模式、独立部署模式Nginx
weixin_46011290的博客
07-03 1196
打包 JAR 文件通常使用 Maven 或 Gradle 构建工具（Spring Boot 项目默认推荐 Maven）。
用nodejs在本地部署前端项目
qq_46634851的博客
08-16 5898
nodejs部署前端项目在本地
使用 go 服务启动前端dist包
qq_41312061的博客
05-07 2042
go 服务部署vue
前端怎么在本地用nginx部署dist包
08-19
- **本地访问**：使用 `http://localhost` 或指定端口（如 `http://localhost:90`）即可访问部署好的前端页面。 - **局域网访问**：将本地 IP 地址替换 `localhost`，例如 `http://192.168.1.100:90`，其他设备即可...
fillzilla上传dist文件到服务器后访问地址没有报错但是页面空白
06-26
根据用户描述，上传的是Vue项目的dist文件夹（构建后的静态文件），访问时空白且无报错。这通常与路径配置、服务器配置或前端路由模式有关。我们参考了提供的引用材料，但并没有直接相关的解决方案。不过，我们可以...
Spring Security 实战：彻底解决 CORS 跨域凭据问题与 WebSocket 连接失败
weixin_41544125的博客
10-02 1259
后端返回响应头允许的来源用而非WebSocket 路径单独放行并配置跨域CORS 过滤器在 Security 链中优先执行按照本文脱敏配置，可彻底解决 CORS 凭据不匹配、WebSocket 连接失败等问题，同时兼顾安全性与灵活性，适配大多数前后端分离项目场景。
通过git拉取前端项目
qq_59093178的博客
10-07 125
通过git拉取前端代码以及再后续的时候通过git更新本地代码
iBizModel 实体逻辑（PSDELOGIC）中的界面逻辑子类（VIEWLOGIC）详解
最新发布
ibizlab开源实验室博客，内容包括iBizModel资料、iBizModeling工具使用及技巧，iBiz开源产品等
10-07 731
在iBizModel模型体系中，实体处理逻辑（PSDELOGIC）是支撑业务系统动态行为的核心模型。其中，界面逻辑（VIEWLOGIC）作为实体逻辑的重要子类，专门处理前端用户界面交互相关的逻辑流程。界面逻辑通过可视化的节点连接方式，定义了用户操作触发的事件处理、数据展示控制、界面状态管理等前端交互行为。下图展示界面逻辑建模：执行环境：界面逻辑主要在前端浏览器环境中执行，而业务逻辑主要在后台服务器执行交互对象：界面逻辑直接操作视图部件、表单控件等前端元素，业务逻辑处理实体数据和业务规则响应要求。
前端-JavaScript简介JavaScript模块化
kong7906928的博客
10-01 1534
前端-JavaScript简介，JavaScript模块化，JavaScript开发工具。
Promise深度解析：前端异步编程的核心
csdn_silent的博客
10-07 473
Promise 是一个代表异步操作最终完成或失败的对象。pending：初始状态，既不是成功，也不是失败fulfilled：操作成功完成rejected：操作失败掌握 Promise 的深度原理和高级用法，能够让你在复杂的异步编程场景中游刃有余，为学习更高级的异步模式（如、RxJS 等）打下坚实基础。核心要点回顾Promise 状态不可逆.then()是微任务是链式调用的核心静态方法allraceallSettled的使用场景避免嵌套、合理使用return和。
KVM Web管理界面安装指南(Cockpit 方案)
阿干tkl的博客
09-30 874
KVM Web管理界面安装指南(Cockpit 方案)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值