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

最新推荐文章于 2025-11-03 10:05:21 发布
原创 最新推荐文章于 2025-11-03 10:05:21 发布 · 1.6w 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #nginx #服务器

前端打包后生成的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 为例：

  1. 全局安装live-server插件
npm install -g live-server
  1. 在dist 或 build文件夹（刚刚打包成功后多出来的文件夹）终端输入
live-server
  1. 浏览项目
    默认监听在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/

Vue项目打包后的dist文件夹如何本地预览？Node服务+局域网访问全攻略 vue项目打包预览、静态服务、express部署、局域网访问、node本地服务、vue打包dist目录预览
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
07-19 364
作为前端开发工程师，我经常遇到这样的问题：“Vue 项目打包完之后，怎么在本地像线上一样预览效果？很多小伙伴直接打开，结果发现页面白屏、路由失效、样式乱掉，这其实是因为 Vue 项目打包后依赖的是服务环境，而不是简单的打开 HTML 文件。今天我就手把手教你，如何用启动一个静态服务来预览打包后的dist目录，并且支持手机等设备通过局域网访问调试。Vue 项目打包后，不是直接打开就能用的，而是需要运行一个真正的服务环境。通过简单的，我们就能轻松实现本地和局域网的静态部署预览。用。
npm run build 自动生成dist.zip
无知者无畏
04-16 1493
npm 自动打包dist.zip
vue项目打包及部署到本地服务器
tiguer的博客
05-21 1万+
大家都知道使用npm run build进行打包，打包后你直接打开dist/下的index.html,会发现文件可以打开，但是页面是空白的，所有的js，css，img等路径都有问题，是指向根目录的。 此时需要修改config/index.js里的assetsPublicPath的字段重新打包，初始项目是/，它是指向项目根目录的也是为什么会出现错误的原因，这时改为./     ./ 当前目录    ...
已经打包好的前端项目如何启动（超详细图文教程）
最新发布
一勺菠萝丶的博客
11-03 1045
目标推荐方式快速预览打包效果部署上线Nginx（生产环境）小白用户宝塔面板上传无服务器方案💬前端项目打包后的文件，其实就是一堆静态资源。启动它的核心思路很简单：“找个能访问静态文件的环境（本地服务器 / 云平台 / 宝塔），把 index.html 打开。无论你是初学者还是老手，只要理解这一点，部署前端项目就不再神秘啦。
npm run build之后生成的dist如何扔到服务器运行（npm run build之后如何本地运行）
热门推荐
Zack_ZXY的博客
07-13 10万+
运行npm run build之后，会生成一个dist文件夹，里面的目录结构大概是这样的：生成完的文件我们怎么来运行呢？直接在本地打开inde.html是无法运行的，打包的时候有提示：构建文件应该通过HTTP服务器提供服务。所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器，下面用Apache Tomcat和Nginx为例，分别运行一下。一、Apche Tomcat1、下载Apch...
npm run build 打包这些玩意
01-08
npm run build 打包这些玩意 打包上传项目是必备的，会遇到一些问题 打包前要配置的东西： config文件夹下的index.js 中的文件中的 assetsPublicPath ：…/改为./ 不然的话会是空白页， build/util.js文件下在 ‘vue-style-loader’ 之后加一行：publicPath: …/…/ 不然的话会有图片显示不出来，字体不能正常使用 vue+element-ui样式发生了变化 main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可
【vue项目本地打包测试，本地运行dist文件夹】
General_D的博客
09-28 3578
vue项目打包：npm run build //或者 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 本地虚拟服务依赖下载：npm install http-server -g 在对应生成的打包文件夹dist文件夹运行命令 http-server 复制地址到浏览器就可以啦~
前端项目打包之后在本地运行的实现方法
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...
详解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 690
2.找到后端项目的resource 目录,我整个项目的jar包是生成在admin模块下，此处可能不存在static文件夹，直接创建以一个，然后将dist里面的文件复制到static下（是里面，不包括dist）图标，图片的问题，如果后端做了拦截，需要配置放行，例如element-ui 的图标，系统的图标，首页的图片等。这种方式部署，还有不少的问题，我图片还有部分图标路径都有问题，还需要调整，总的来说前后端分离的项目，老老实实使用nginx分离部署比较好。前端的路由还要配置为hash模式，否则的话刷新会报错。
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。步骤三：打开浏览器输入。
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？
weixin_46721670的博客
10-11 1621
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？
前端自测运行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
……
前端vue打包用npm run build后怎么启动这个包
07-20
前端 Vue 项目在使用 `npm run build` 命令打包后，会生成一个 `dist` 文件夹，其中包含静态资源文件（如 HTML、CSS、JS 等），这些文件可以部署到任何支持静态资源托管的 Web 服务器上进行运行[^1]。 ### 如何运行...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值