如何启动一个静态的前端工程的服务

使用场景

在前端开发过程中,可能会要对发布到生产的包做验证或者要本地运行一个开源的包的实例,这时候就需要在本地启动一个前端服务,一般有以下两种方式

运行方式

Live-Server

通过VsCode去安装插件LiveServer,然后打开静态工程,点击右下角的Live Server按钮 即可运行工程

  • 优点:使用简单,方便快捷
  • 缺点:不支持自定义配置,如工程里面需要代理请求,则无法实现

express

使用express结合http-proxy-middleware来代理请求运行静态工程

  1. 在项目根目录 运行命令,初始化工程
shell 复制代码
npm init -y
  1. 然后安装库nodemonexpresshttp-proxy-middlewaremime-types
工具 介绍
nodemon^[1](#工具 介绍 nodemon1 是一个工具,可在检测到目录中的文件更改时自动重新启动Node应用程序,从而帮助开发基于 Node.js 的应用程序。 express2 适用于Node.js的快速、不拘一格、简约的 Web 框架。 mime-types3 帮助Node.js程序识别mime-types类型的插件 http-proxy-middleware4 http代理中间件,使Node.js 代理变得简单。轻松配置connect、express、next.js等代理中间件。 "#user-content-fn-1")^ 是一个工具,可在检测到目录中的文件更改时自动重新启动Node应用程序,从而帮助开发基于 Node.js 的应用程序。
express^[2](#工具 介绍 nodemon1 是一个工具,可在检测到目录中的文件更改时自动重新启动Node应用程序,从而帮助开发基于 Node.js 的应用程序。 express2 适用于Node.js的快速、不拘一格、简约的 Web 框架。 mime-types3 帮助Node.js程序识别mime-types类型的插件 http-proxy-middleware4 http代理中间件,使Node.js 代理变得简单。轻松配置connect、express、next.js等代理中间件。 "#user-content-fn-2")^ 适用于Node.js的快速、不拘一格、简约的 Web 框架。
mime-types^[3](#工具 介绍 nodemon1 是一个工具,可在检测到目录中的文件更改时自动重新启动Node应用程序,从而帮助开发基于 Node.js 的应用程序。 express2 适用于Node.js的快速、不拘一格、简约的 Web 框架。 mime-types3 帮助Node.js程序识别mime-types类型的插件 http-proxy-middleware4 http代理中间件,使Node.js 代理变得简单。轻松配置connect、express、next.js等代理中间件。 "#user-content-fn-3")^ 帮助Node.js程序识别mime-types类型的插件
http-proxy-middleware^[4](#工具 介绍 nodemon1 是一个工具,可在检测到目录中的文件更改时自动重新启动Node应用程序,从而帮助开发基于 Node.js 的应用程序。 express2 适用于Node.js的快速、不拘一格、简约的 Web 框架。 mime-types3 帮助Node.js程序识别mime-types类型的插件 http-proxy-middleware4 http代理中间件,使Node.js 代理变得简单。轻松配置connect、express、next.js等代理中间件。 "#user-content-fn-4")^ http代理中间件,使Node.js 代理变得简单。轻松配置connect、express、next.js等代理中间件。
shell 复制代码
npm i nodemon express http-proxy-middleware mime-types -D
  1. 编写入口文件app.js
javascript 复制代码
const express = require('express')
const path = require('path')
const mine = require('mime-types')
const { createProxyMiddleware } = require('http-proxy-middleware')
const app = express();
const gateWayProxy = createProxyMiddleware('/api', {
	target: 'http://172.18.0.197',// 设置要代理的目标服务器
	changeOrigin: true, //  启用跨域
	// pathRewrite: {
	// '^/api': '',// 将请求路径中的'/api'替换为空白
	// },
});
// 使用代理中间件
app.use(gateWayProxy);
// 使用静态文件中间件处理静态文件请求
app.use(express.static(path.join(__dirname), {
	setHeaders: (res, path) => {
		// 根据文件扩展名设置正确的 MIME 类型
		const mimeType = mine.lookup(path);
		// console.log(mimeType)
		if (mimeType) {
			res.setHeader('Content-Type', mimeType);
		}
	}
}))

// 处理根路径请求,发送index.html
app.get('/', (req, res) => {
	res.sendFile(path.join(__dirname, 'index.html'));
})

const port = 3001;
app.listen(port, () => {
	console.log(`Server is running on port ${port}`);
});
  1. 在package.json文件中的scripts节点中添加运行脚本
javascript 复制代码
{
	"scripts":{
		"dev":"nodemon app.js"
	}
}
  1. 执行命令,启动静态工程
shell 复制代码
npm run serve

Footnotes

  1. nodemon

  2. express

  3. mime-types

  4. http-proxy-middleware

相关推荐
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
ncj3934379064 小时前
vscode中对node项目进行断点调试
vscode·node.js
abigale035 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
墨菲安全16 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
csdn_aspnet1 天前
Node.js 使用 WebSockets 和 Socket.IO 实现实时聊天应用程序
node.js
whhhhhhhhhw1 天前
Node.js核心API(fs篇)
node.js
聪聪的学习笔记1 天前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
GDAL2 天前
Node.js v22.5+ 官方 SQLite 模块全解析:从入门到实战
数据库·sqlite·node.js
RunsenLIu2 天前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
Allen_zx2 天前
Elpis - 基于 Koa + Vue3 的企业级全栈应用框架
node.js