【超简单】安装及运行 http-server 简易node服务器，本地浏览器打开build打包之后的dist文件

最新推荐文章于 2025-06-30 08:00:00 发布
最新推荐文章于 2025-06-30 08:00:00 发布
阅读量6.1k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lgysjfs/article/details/86604943
本文介绍了一种在本地查看build后dist文件的方法，通过使用node.js的http-server插件搭建简易服务器，使得dist文件可在本地及同一WiFi下手机访问。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

build之后的dist文件只有放在服务器上才能查看，但本地如何查看呢，我们可以利用node.js中的 http-server 的插件，搭建一个简易node服务器。

1、全局安装 http-server（建议的），可以用下面三个命令中的其中一个

国外npm网站直接安装命令：  npm i http-server -g   

淘宝cnpm镜像安装命令：       cnpm i http-server -g

linux系统安装命令：               yarn -g http-server

2、进入dist文件夹，Shift + 鼠标右键 打开命令窗口

3、输入 http-server 启动本地服务

下面这张图就是启动本地服务成功了，

只要输入它提醒的三个本地服务地址中的其中一个，手机和电脑都可以访问 dist 文件下面的网页了，手机需要和电脑在同一个 wifi 下面才可以访问。

http://192.168.210.109:8080

http://192.168.1.112:8080

http://127.0.0.1:8080

webpack4配置区分webpack --watch与webpack-dev-server
qq_21816073的博客
08-13 840
最近，利用webpack搭建一个简单的集成html，scss与js的脚手架，方便时常做一些简单的开发。 项目结构如下： --dist --src --scss index.html index.js package.json webpack.config.js 前提至少需要配置css规则和js规则，需要用到style-loader,css-loader以及scss-loader,同时需要安...
环境配置[1][Node.js][A]
思维光线
09-14 181
nvm install [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。默认是https://nodejs.org/dist/。示例：添加一个公司私有的npm源，源地址为：http://192.168.130.12:8888/repository/npm-public/，源名为cpm。nvm use [version] [arch] ：使用制定版本node。
vue项目生成dist网页空白问题
weixin_40961514的博客
12-19 308
是因为打包资源路径问题，在vue.config.js设置文件中做如下配置就可以解决了： module.exports = { publicPath: './' } 做好配置后再次运行npm run build 进入dist打开index就可以看到页面了
使用IBM HTTP Server for i运行Node.js
cusi77914的博客
06-29 390
本文介绍如何利用Node.js FastCGI插件将IBM HTTP Server for i与Node.js关联。 本文介绍了本地和远程关联。 此外，本文中的一个简单Node.js示例说明了如何使用HTTP Server身份验证机制来保护和保护应用程序。 本文提供了设置环境的分步指南。 Node.js是基于Google Chrome V8引擎的开源项目。 它为无需浏览器即可运行的服务器端...
Vue3 npm run build后使用http-server 查看dist文件效果
最新发布
m0_48968874的博客
06-30 420
摘要： 前端项目打包后，直接打开index.html可能显示空白页。解决方法是使用http-server启动本地服务查看效果： 进入dist目录，通过命令行安装http-server（npm install http-server -g）； 启动服务并指定端口（如http-server -p 8000）； 浏览器访问http://127.0.0.1:8000即可预览。此方法避免路径错误，确保资源正常加载。更多技巧可关注公众号“前端小知识营地”。
http-server -运行打包好的前端dist包
来一颗砂糖橘
06-02 1万+
http-server -运行打包好的前端dist包
http-server安装及运行
热门推荐
github_38696818的博客
05-10 3万+
既然你知道http-server那么node和npm的安装我就不说了,当然你也可以实用Yarn安装.重点:请实用管理员权限安装 server .npm install http-server -g pm i http-serveryarn -g http-server以上命令安装启用就非常简单了找到你的文件夹,在当前文件夹下打开命令行,输入http-server,默认启动8080端口,   htt...
【http-server】http-server的安装、前端使用http-server启动本地dist文件服务:
SunPeng的博客
07-14 5520
【http-server】http-server的安装、前端使用http-server启本地dist服务:
vue-cli打包后本地运行dist文件中的index.html操作
10-14
然后通过npm安装Express并运行server.js，从而在本地搭建起一个简易的服务器环境，之后就可以在浏览器中通过相应的URL来访问打包后的应用了。 此外，描述中还提到了一些解决Vue项目打包后在本地访问时页面空白的...
请通过本地 HTTP 服务器运行前端代码，在哪里运行
03-30
通过安装必要的依赖工具（如 Node.js 和 Yarn 或 npm），可以快速启动一个开发服务器来运行前端代码。 1. **安装必要软件** 首先确保已安装 Node.js 和 Yarn/npm。如果 VSCode 中无法运行 `yarn` 命令，则可能需要...
vue本地打开build后生成的dist文件夹index.html问题
10-16
主要介绍了vue本地打开build后生成的dist文件夹index.html问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
打造简易聊天应用：使用socketio与react-redux架构
在开发中代理API请求是指配置Webpack-dev-server或其他本地开发服务器，以将前端发出的API请求代理到实际的后端服务器。 #### 配置代理后出现“无效的主机头”错误 “无效的主机头”错误通常出现在代理配置不正确...
如何运行dist文件夹
为啥不能换名字的博客
12-09 2200
npm install express -g npm install express-generator -g express expressDemo （expressDemo是项目名） cd expressDemo npm install npm start //浏览器打开 http://localhost:3000/#/
http-server：在本地打开vue项目 build之后的包
string佳佳的博客
08-28 556
原博地址
nodejs服务本地预览打包后的vue文件
Cynthia_Yue27的博客
09-09 1032
node起本地服务，预览vue打包后文件，解决跨域问题
vue项目本地打包测试，本地运行dist文件夹
团酱
05-17 2056
根目录下创建 .env.development .env.production .env.staging。
运行 dist 打包文件：简单得很!!!
mygoes
08-04 1万+
运行 dist 打包文件：简单得很!!!1. 一般打包完成后会在项目根目录生成一个 dist 文件夹，此时，我们在项目根目录新建一个 js 文件（我以 server.js 为例），server.js 中代码如下：2. 在项目根目录下运行 node 命令启动 server.js 文件：3. 到此，只要在浏览器输入：`http://localhost:8012` 即可预览 dist 文件夹的打包 项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？ 1. 一般打包完成后会在项目根目录生成
dist文件布置到服务器,vue-dist访问-搭建本地服务器
weixin_39667041的博客
08-13 798
启动服务器访问vue工程打包好的资源文件【方式一：】利用NodeJS 的框架Express首先自己电脑得安装有NodeJS，然后再安装express中间件Express[1].安装expressr:$npm i express --save -dev[2].写node脚本server 文件夹下的 server.js代码://引入express中间件var express = require('ex...
vue3项目打包成dist文件夹使用http-server命令运行报错但是不打包就能正常运行
06-14
<think>我们正在解决Vue3项目打包后使用http-server运行时报错的问题。根据引用内容，我们可以推测几个可能的原因和解决方案：1.**路由模式问题**：Vue3使用history模式的路由时，在静态服务器上需要配置回退到index.html。引用[1]提到vue3路由文件的修改，可能涉及路由配置。2.**开发环境与生产环境加载路径差异**：引用[1]中展示了如何根据环境加载不同内容（开发环境URLvs生产环境文件）。打包后应该加载打包生成的index.html文件。3.**资源路径问题**：打包后的静态资源路径可能不正确，需要配置publicPath。4.**代理配置问题**：引用[4]提到了代理配置，但打包后运行不需要代理，所以这个可能不是直接原因，但开发环境配置可能影响了打包行为。5.**依赖安装或构建问题**：引用[2][3]提到了依赖安装问题，可能导致构建失败或运行异常。**解决方案步骤：**1.**确保正确打包**：-在项目根目录运行打包命令：`npmrunbuild`或`yarnbuild`。-检查生成的`dist`目录是否包含`index.html`和静态资源。2.**配置路由为hash模式**（如果使用VueRouter）：-在路由配置文件中，将`history`模式改为`hash`模式，这样在静态服务器上不会出现404错误。```javascriptimport{createRouter,createWebHashHistory}from'vue-router'constrouter=createRouter({history:createWebHashHistory(),routes:[...]})```3.**设置publicPath**：-在`vue.config.js`中设置`publicPath`为相对路径（`./`），确保资源加载正确。```javascriptmodule.exports={publicPath:'./'}```4.**使用http-server正确运行**：-进入dist目录：`cddist`-运行http-server：`npxhttp-server-p8080`（或全局安装后直接`http-server`）-如果报错关于路由，尝试在http-server启动时添加`--gzip`和`--proxyhttp://localhost:8080?`（通常不需要代理，但可以尝试）或者使用`--rewrite`选项将请求重定向到index.html（对于history模式）：```npxhttp-server-p8080--gzip--rewrite```注意：http-server的rewrite选项需要指定一个正则表达式来重写所有请求到index.html，但http-server默认不支持单页应用的路由回退。因此，更推荐使用hash路由，或者使用支持history模式的静态服务器（如express）。5.**如果上述方法无效，考虑使用其他静态服务器**：-例如，使用`serve`包：`npminstall-gserve`，然后在dist目录运行`serve`。6.**检查控制台错误**：-打开浏览器控制台，查看具体报错信息（如404资源加载失败、JS执行错误等），根据错误进一步调整。**常见报错及处理：**-**白屏或404**：通常是因为路由为history模式且服务器未配置回退。改为hash模式或配置服务器重定向。-**资源加载404**：设置publicPath为相对路径`./`。-**JS/CSS加载失败**：检查dist目录中的资源路径，确保路径正确。如果问题仍然存在，请提供具体的错误信息以便进一步排查。§§相关问题§§1.Vue3项目打包后如何配置路由以避免页面刷新出现404？2.如何解决Vue项目打包后静态资源路径错误的问题？3.除了http-server，还有哪些静态服务器适合部署Vue项目？</think>### 解决Vue3项目打包后使用http-server运行报错问题 以下是常见原因及解决方案，结合Vue3特性和打包部署实践： #### 1. **路由模式问题（最常见）** - **问题原因**：Vue Router使用`createWebHistory()`（history模式）时，需服务器配置URL重写规则 - **解决方案**： ```javascript // router/index.js import { createRouter, createWebHashHistory } from 'vue-router' // 改用hash模式 const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), // [!code focus] routes: [...] }) ``` 或配置http-server重定向： ```bash http-server dist --gzip --rewrite ``` #### 2. **静态资源路径错误** - **问题表现**：JS/CSS文件404错误 - **解决方案**： ```javascript // vite.config.js / vue.config.js export default defineConfig({ base: './', // [!code focus] 相对路径 build: { assetsDir: 'static' // 明确资源目录 } }) ``` #### 3. **开发环境依赖泄漏** - **问题特征**：控制台提示`process.env`相关错误 - **解决方案**： 1. 清除旧依赖： ```bash rm -rf node_modules package-lock.json ``` 2. 重装生产依赖： ```bash npm install --production ``` 3. 重建项目： ```bash npm run build ``` #### 4. **环境变量未注入** - **问题表现**：API地址等配置失效 - **解决方案**： ```javascript // .env.production VITE_API_BASE=/api // 构建命令 npm run build -- --mode production ``` #### 5. **跨域请求问题（针对API）** - **临时解决方案**（仅开发）： ```javascript // vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://real-api.com', changeOrigin: true } } } }) ``` #### 6. **http-server启动参数优化** 推荐启动命令： ```bash npx http-server dist \ -c-1 \ # 禁用缓存 --gzip \ # 启用压缩 --rewrite \ # 支持SPA路由 -p 8080 ``` > **验证步骤**： > 1. 检查`dist/index.html`中资源路径是否正确（应为相对路径`./assets/...`） > 2. 浏览器控制台查看具体报错信息 > 3. 使用`serve`替代测试：`npx serve dist` ### 部署建议 对于生产环境，建议使用Nginx配置： ```nginx server { listen 80; location / { root /path/to/dist; try_files $uri $uri/ /index.html; # SPA路由支持 } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值