前端打包后生成的dist 或 build目录，如何在本地启动服务运行

最新推荐文章于 2025-11-03 10:05:21 发布

原创最新推荐文章于 2025-11-03 10:05:21 发布 · 1.6w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nginx #服务器

打包工具及其配置专栏收录该内容

5 篇文章

订阅专栏

前端打包后生成的dist/build目录，如何在本地启动服务运行

运行npn run build，会打包后会产生 dist 或 build 目录
一般情况下，直接打开dist 或 build 目录下的 index.html会在浏览器看到内容。
然而发现网页一片空白，打开了控制台，看到一片404的各种找不到资源，或者出现跨域的提示

请添加图片描述

解决方案

server https://www.npmjs.com/package/server
http-server https://www.npmjs.com/package/http-serve
live-server https://www.npmjs.com/package/live-server
在本地搭建express服务器
使用nginx本地服务器

方案一

前三种基本使用方法是一致

以 live-server 为例：

全局安装live-server插件

npm install -g live-server

在dist 或 build文件夹（刚刚打包成功后多出来的文件夹）终端输入

live-server

浏览项目
默认监听在8080端口，打开浏览器，输入localhost:8080 就可以预览了

http://www.51sio2.cn//article/334864831.html

方案二

搭建express本地服务器

具体介绍：
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案三

使用nginx本地服务器运行

具体介绍：
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案四

手动起一个本地服务

具体介绍：
https://www.codenong.com/cs109000079/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AS_TS

关注关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue项目打包后的dist文件夹如何本地预览？Node服务+局域网访问全攻略 vue项目打包预览、静态服务、express部署、局域网访问、node本地服务、vue打包dist目录预览

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

07-19

364

作为前端开发工程师，我经常遇到这样的问题：“Vue 项目打包完之后，怎么在本地像线上一样预览效果？很多小伙伴直接打开，结果发现页面白屏、路由失效、样式乱掉，这其实是因为 Vue 项目打包后依赖的是服务环境，而不是简单的打开 HTML 文件。今天我就手把手教你，如何用启动一个静态服务来预览打包后的dist目录，并且支持手机等设备通过局域网访问调试。Vue 项目打包后，不是直接打开就能用的，而是需要运行一个真正的服务环境。通过简单的，我们就能轻松实现本地和局域网的静态部署预览。用。

前端：React/Vue项目打包后的代码不部署，怎么在本地运行？

weixin_46721670的博客

10-11

1621

前端：React/Vue项目打包后的代码不部署，怎么在本地运行？

1 条评论您还未登录，请先登录后发表或查看评论

vue项目打包及部署到本地服务器

tiguer的博客

05-21

1万+

大家都知道使用npm run build进行打包，打包后你直接打开dist/下的index.html,会发现文件可以打开，但是页面是空白的，所有的js，css，img等路径都有问题，是指向根目录的。此时需要修改config/index.js里的assetsPublicPath的字段重新打包，初始项目是/，它是指向项目根目录的也是为什么会出现错误的原因，这时改为./ ./ 当前目录 ...

已经打包好的前端项目如何启动（超详细图文教程）

热门推荐

Zack_ZXY的博客

07-13

10万+

运行npm run build之后，会生成一个dist文件夹，里面的目录结构大概是这样的：生成完的文件我们怎么来运行呢？直接在本地打开inde.html是无法运行的，打包的时候有提示：构建文件应该通过HTTP服务器提供服务。所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器，下面用Apache Tomcat和Nginx为例，分别运行一下。一、Apche Tomcat1、下载Apch...

前端项目打包之后在本地运行的实现方法

u013896513的博客

03-15

1104

一、在bash命令行输入npm install -g serve。二、接着输入serve -s dist。

前端dist文件放服务器,详解Webpack打包Vue项目之后生成的dist文件该怎么启动运行_凊蒝_前端开发者...

weixin_34260080的博客

08-13

4147

亲测，webpack打包我的1. 进入该执行成功如下图所示：然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。此时我们直接在浏览器中打开index.2. 安装express-generator生成器执行$ npm install express-generator -g进行安装3. 创建一个express项目执行$ express expres...

vue3项目打包后，将dist文件在本地运行

weixin_66582617的博客

03-05

2683

vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。

js 前端打包的build文件怎么在本地运行

water_Popcorn的博客

04-17

1104

步骤二：在build目录下打开cmd，输入。步骤一：全局安装live-server。步骤三：打开浏览器输入。

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

12-12

Webpack 是一款强大的模块打包...总之，Webpack 打包 Vue 项目后生成的 `dist` 文件需要部署到服务器才能正确运行，通过结合 Express.js 可以快速搭建一个简单的服务器环境，实现打包后 Vue 项目的本地预览或线上部署。

vue-cli打包后本地运行dist文件中的index.html操作

10-14

在打包完成后，我们通常需要将dist文件夹中的内容部署到服务器上，但在部署之前，往往需要在本地环境中测试打包后的应用是否正常运行。这一步骤对于确保部署前的应用稳定性和功能完整性是必不可少的。描述中提到的...

前端的dist包放到后端springboot项目下一起打包

m0_74825360的博客

01-24

689

2.找到后端项目的resource 目录,我整个项目的jar包是生成在admin模块下，此处可能不存在static文件夹，直接创建以一个，然后将dist里面的文件复制到static下（是里面，不包括dist）图标，图片的问题，如果后端做了拦截，需要配置放行，例如element-ui 的图标，系统的图标，首页的图片等。这种方式部署，还有不少的问题，我图片还有部分图标路径都有问题，还需要调整，总的来说前后端分离的项目，老老实实使用nginx分离部署比较好。前端的路由还要配置为hash模式，否则的话刷新会报错。

前端自测运行vue打包后的dist文件

m0_68716504的博客

07-19

3168

在中，dist目录是代码打包之后生成的文件夹，其中包含了静态资源文件和打包后的JavaScript、CSS等文件。如果要在本地运行打包后的项目文件，可以使用简单的静态服务器来启动。

本机启动运行前端提供的dist包

qq_42542312的博客

04-27

3817

在浏览器中访问http://localhost:8080，即可查看前端页面。注意：如果前端页面中有需要与后端进行交互的接口，需要确保后端服务已经启动并且接口地址正确。要在本机启动运行前端提供的dist包，需要先安装一个HTTP服务器，例如Apache或Nginx。这里以使用Node.js的http-server为例进行说明。在浏览器中访问http://localhost:端口号，即可查看前端页面。首先，确保已经安装了Node.js。如果没有安装，可以从。修改文件config.json。

使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行

夜空孤狼啸的博客

08-09

4242

使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行。vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错，无法运行起来。通常我是放到后端搭建的服务上面去运行，当时前端自己也可以是node，nuxt搭建服务器，写接口等等如果想在本地运行，我们可以借助node.js+express搭建一个服务器，将打包后的文件部署在服务器上，就可以运行起来了。

在本地启动运行打包后的dist文件

qq_45108629的博客

11-29

950

……

前端开发者运行打包后的前端项目的两种方法

个人博客

02-18

5574

两种方法运行打包后的前端项目

vue项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？

An滴饭儿的博客

02-02

1424

vue项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？

将前端dist文件打包成war包在tomcat里面部署

weixin_42694286的博客

05-06

4019

首先npm run build打包出dist文件夹。

前端vue打包用npm run build后怎么启动这个包

07-20

前端 Vue 项目在使用 `npm run build` 命令打包后，会生成一个 `dist` 文件夹，其中包含静态资源文件（如 HTML、CSS、JS 等），这些文件可以部署到任何支持静态资源托管的 Web 服务器上进行运行[^1]。 ### 如何运行生成的 dist 文件夹 1. **本地测试运行 dist 文件夹** 可以通过安装本地静态服务器来测试打包后的项目，例如使用 `serve` 工具： ```bash npm install -g serve serve -s dist ``` 运行完成后，可以通过 `http://localhost:5000` 访问打包后的项目[^4]。 2. **部署到 Nginx** 将 `dist` 文件夹中的内容复制到 Nginx 的 `html` 目录下，然后配置 Nginx 的 `server` 块，确保根目录指向该文件夹： ```nginx server { listen 80; server_name your_domain; location / { root /path/to/dist; index index.html; try_files $uri $uri/ =404; } } ``` 配置完成后重启 Nginx 服务即可访问。 3. **使用 Node.js 和 Express 托管** 创建一个简单的 Express 服务来托管静态文件： ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); ``` 启动服务后，访问对应端口即可查看项目[^2]。 4. **部署到服务器** - 将 `dist` 文件夹打包上传至服务器。 - 解压后放置在服务器的 Web 根目录或配置好的静态资源目录中。 - 使用 Nginx 或 Apache 等服务器软件进行托管。 ### 注意事项 - 如果使用了 Vue Router 的 `history` 模式，需要确保服务器配置支持重定向到 `index.html`，否则会出现 404 错误。 - 在部署时如果页面空白，检查 `vue.config.js` 中的 `publicPath` 是否设置为 `"./"`，以确保资源路径正确[^4]。