【vue项目本地打包测试，本地运行dist文件夹】

最新推荐文章于 2025-10-16 12:19:16 发布

原创

最新推荐文章于 2025-10-16 12:19:16 发布 · 3.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文指导如何在Vue项目完成后进行本地打包，通过npmrunbuild生成dist文件夹，使用http-server搭建本地HTTP服务，确保项目能在本地正常运行和预览，以便于测试和发布前的验证。

vue项目本地打包运行测试，本地运行dist文件夹

vue项目本地打包教程

vue项目本地打包教程

问题概述：
在我们完成一个vue项目后，紧接着就是需要把我们的项目打包发布上线，但是我们怎么确定我们自己打包的项目放到服务器上是没有问题的呢？
所以本地打包测试尤为重要！
在这里，我们先默认你已经写好了一个vue项目，然后我们开始打包

项目打包

npm run build
//或者
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

具体的打包代码得根据实际项目来看，当我们运行完成命令后，会在如图所示
在这里插入图片描述
在打包完成后，会在我们的项目文件夹中生成一个dist文件夹，这个文件夹便是我们需要发布到线上的东西

本地环境安装

通过win+R唤起输入框输入cmd，调取CMD命令运行框，当然powershell也可以，想用哪个都可以，然后执行以下安装命令

npm install http-server -g

安装截图

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Aress"

关注关注

4
点赞
踩
9

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

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

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

07-19

311

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

vue打包本地启动方案

qq_28875189的博客

05-23

1484

在本地启动Vue打包的方案有很多种。

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

2 条评论

weixin_44560027 2023.11.20
报404，这个怎么解决？
- Aress"回复weixin_44560027 2023.11.20
  404看一下接口地址有没有切换呢，如果有正式环境的话，也就是说接口地址找不到呢

如何运行vue打包之后的dist文件

CLOUDS06的博客

03-29

1万+

介绍一种使用Node.js中的http-server模块搭建本地服务器的方法：1.确认已经安装了Node.js；2.安装http-server模块；3.进入到dist目录；4.启动http-server；5.输入网址，访问项目文件。

关于Vue - Webpack 项目打包出现的一些问题

lensgcx的博客

11-03

3万+

关于Vue - Webpack 项目打包出现的一些问题

本地打包的dist代码如何跑起来

最新发布

m0_64985879的博客

10-16

210

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

weixin_66582617的博客

03-05

2644

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

vue项目本地打包测试，本地运行dist文件夹

团酱

05-17

2148

根目录下创建 .env.development .env.production .env.staging。

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

qq_38902432的博客

04-04

5483

vue项目开发好后，想在本地运行测试最后的打包文件可以通过http-server来启动。最后在浏览器输入：127.0.0.1:9007就可以查看了。

vue项目打包后在本地运行

墨灬笙的博客

08-24

5397

vue项目打包后在本地运行首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令；如果出现下面这个错误：就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n

vue打包后如何在本地运行？

先做到再看见

08-01

865

本文介绍了Springboot+Vue项目打包部署的全流程：1）配置vue.config.js设置静态资源路径；2）创建VueRouter实例并配置hash模式路由；3）通过npm run build生成dist文件夹；4）后端配置静态资源处理器，指定static目录并设置访问权限；5）添加重定向控制器将根路径指向前端入口页面。最终实现本地运行打包后的Vue应用，通过访问根路径自动加载前端页面。

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

10-14

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

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

10-16

webpack打包vue项目之后生成的dist文件启动运行的方法涉及到多个步骤和知识点，包含了Vue、webpack、Express以及Node.js的综合运用。下面将详细解析每个步骤背后的原理和技术点。 ### webpack打包Vue项目 webpack...

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

An滴饭儿的博客

02-02

1388

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

Vue项目的打包方式（生成dist文件）

热门推荐

商务合作 | 共同学习 | 携手共进

12-30

18万+

打包vue项目，生成dist文件夹。

本地运行vue的dist文件

qq_40068304的博客

05-23

1704

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查看项目 ...

Vue打包好的dist如何在本地运行

qq_34068440的博客

10-28

3182

方法1:进入dist文件夹，运行 http-server。

本地运行vue dist文件

韩大璐

08-08

1万+

vue打包命令 npm run build 运行这个命令会在目录中生成一个dist文件夹 在服务器部署vue项目只需要把这个文件夹给后台就可以了但是打包之后我们需要在本地先自测一下，下面就是踩过的一些坑：静态资源路径问题——空白页面解决方法：打开脚手架的config文件中的index.js文件，把build对象内的assetsPublicPath(发布路径)改为"./"。默认的情况下是...

vue项目打包后本地运行方法

zjltci的博客

04-20

8058

搭建express本地服务器 1.安装express-generator （cmd全局安装） npm i express-generator -g 2.cmd打开要创建项目的文件夹，跑下面的代码，创建一个express项目 express my-express-project 注：my-express-project 是项目名称，可随意自取，只要运行下面命令时保持统一即可。 3.进入项目目录 cd my-express-project 这时my...

vue项目打包后如何在本地运行

weixin_48667689的博客

08-05

2422

vue项目打包后如何在本地运行

vue3打包后的dist文件夹在本地无法运行

06-14

<think>首先，用户的问题是：“我想解决Vue3打包后dist文件夹在本地无法运行的问题请问vue3dist文件夹本地无法运行解决方案”。基于系统级指令，我需要使用中文回答。参考站内引用：-引用[1]：提到资源路径问题导致白屏。-引用[2]：建议修改assetsPublicPath为"./"。-引用[3]：提到了Vite配置。-引用[4]：提到ESModule跨域问题，建议使用@vitejs/plugin-legacy。这些引用表明问题可能涉及资源路径配置和跨域问题。回答结构：-结构清晰，逐步解决问题。-确保回答真实可靠。-使用$...$和$$...$$格式行内和独立公式（但这里可能不涉及数学公式，所以可能不需要）。-生成相关问题。关键问题：Vue3项目打包后，在本地打开dist/index.html显示白屏。常见原因：1.资源路径错误：打包后的文件路径不正确，导致无法加载CSS、JS等。2.跨域问题：本地文件系统使用file://协议，而ESModule可能涉及跨域限制。3.Vite配置：需要正确配置base路径或使用插件。解决方案：-基于引用[2]，修改vite.config.js中的base为"./"。-基于引用[4]，安装@vitejs/plugin-legacy插件来处理ESModule兼容性问题。详细步骤：1.**修改Vite配置**：在vite.config.js中设置base为"./"。2.**安装legacy插件**：使用npm安装@vitejs/plugin-legacy。3.**打包命令**：运行打包命令。4.**本地测试**：使用本地服务器而不是直接打开文件，以避免跨域问题。例如，使用Python的http.server或Node的serve。建议使用本地服务器，因为file://协议有局限性。生成相关问题：-类似于示例，列出几个相关问题。回答结构：-介绍问题原因。-提供解决方案步骤。-结束语。-添加相关问题。确保语言为中文。</think>### Vue3打包后dist文件夹在本地无法运行的解决方案当您使用Vue3项目（如基于Vite和TypeScript的构建）打包后，在本地直接打开dist文件夹中的index.html文件时，可能会遇到白屏问题。这通常是由于资源路径错误或跨域限制导致的。以下是基于常见原因的逐步解决方案，确保您的项目在本地正常运行。我会使用Vue3 + Vite + TS项目的典型配置进行说明（以vite.config.js为例）。 #### 问题原因分析 1. **资源路径错误**：打包后，静态资源（如JS、CSS文件）的引用路径默认为绝对路径（如`/assets/...`），在本地文件系统（file://协议）中无法正确加载，导致白屏[^1][^2]。 2. **ES Module跨域问题**：Vite默认使用ES Module加载资源，但本地文件系统不支持跨域访问，浏览器会阻止加载[^4]。 3. **配置缺失**：Vite配置未针对本地环境优化，如未设置相对路径或未处理兼容性。 #### 解决方案步骤按照以下步骤操作，确保配置正确： 1. **修改Vite配置文件中的资源路径** 打开您的`vite.config.js`文件，将`base`属性设置为相对路径`"./"`。这确保所有资源引用使用相对路径，避免本地加载失败。 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ base: './', // 关键修改：设置为相对路径 plugins: [vue()], }) ``` 参考引用[2]，此设置将绝对路径改为相对路径，解决白屏问题。 2. **安装并配置@vitejs/plugin-legacy插件** 为了解决ES Module跨域问题，安装legacy插件，它会将代码转换为兼容旧浏览器的格式，绕过跨域限制。 - 安装插件： ```bash npm install @vitejs/plugin-legacy --save-dev ``` - 更新`vite.config.js`： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import legacy from '@vitejs/plugin-legacy' // 导入插件 export default defineConfig({ base: './', plugins: [ vue(), legacy({ // 添加legacy插件配置 targets: ['defaults', 'not IE 11'], // 指定兼容目标 }), ], }) ``` 参考引用[4]，此步骤处理了本地file://协议的跨域限制。 3. **重新打包项目** 运行打包命令生成dist文件夹： ```bash npm run build ``` 确保dist文件夹中包含正确的index.html和资源文件（如assets子目录）。 4. **使用本地服务器测试（推荐）** 直接在浏览器打开index.html（如双击文件）可能仍有问题。推荐使用本地HTTP服务器： - **方法1：使用Node.js的serve工具** ```bash npm install -g serve # 全局安装serve serve -s dist # 启动服务器，-s参数处理单页应用路由 ``` 访问`http://localhost:3000`测试。 - **方法2：使用Python内置服务器** ```bash cd dist # 进入dist文件夹 python -m http.server 8000 # 启动服务器（需Python 3.x） ``` 访问`http://localhost:8000`测试。本地服务器模拟真实环境，避免file://协议的跨域问题[^3]。 #### 验证和常见问题 - **验证成功**：访问本地服务器URL后，页面应正常显示，无控制台错误。 - **如果仍白屏**： - 检查浏览器控制台（按F12）：确保无"Failed to load resource"或跨域错误。 - 确保多入口配置（如适用）在vite.config.js中正确设置。 - 清除浏览器缓存：有时旧缓存导致问题。通过以上步骤，您的Vue3项目dist文件夹应该能在本地正常运行。如果问题持续，请提供更多错误日志以便进一步诊断[^1][^4]。