web前端常⽤的五种⽅式搭建本地静态html页⾯服务器⽅式⼀：liv e-s e r v e r
live-server是⼀款npm⼯具，可以在项⽬⽬录启动⼀个node服务，然后直接在浏览器中预览，并且⾃动全局监听实时更新。
两种安装⽅式：
全局安装 npm i live-server -g
本地安装  npm i live-server --save-dev
直接使⽤live-server
⾸先在项⽬下npm初始化:npm init -y;
然后可以选择全局安装或者本地安装live-server，然后在package.json的scripts属性中添加如下代码：
"scripts": {
"server": "live-server ./ --port=8181 --host=localhost --proxy=/api:www.abc/api/"
}
其中包括了代理设置proxy。
然后npm run server执⾏下就会⾃动打开当前⼯程，默认指向index.html页⾯。
使⽤node
⾸先本地安装live-server，执⾏如下指令：
npm i live-server --save-dev
然后在该项⽬下新建⼀个build.js，代码如下：
var liveServer = require("live-server");
var params = {
port: 8181,
host: "localhost",
open: true,
file: "index.html",
wait: 1000,
logLevel: 2,
proxy: [['/api','www.abc/api/']]
};
liveServer.start(params);
最后在package.json的scripts下添加如下代码：
"scripts": {
"dev": "node build.js"
}
⽅式⼆：http-s e r v e r
全局安装http-server
npm i -g http-server
⽤法：
http-server [path] [options]
其中的path默认指向⼯程路径下的./public，如果不存在那么使⽤./。
options就是常见的配置，⽐如端⼝、代理地址等，常⽤配置：
-p or --port Port to use (defaults to 8080). It will also read v.PORT. （设置端⼝）
-a Address to use (defaults to 0.0.0.0) （设置访问地址）
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P someurl（设置代理地址）-o [path] Open browser window after starting the server. Optionally provide a URL path to open. e.g.: -o /other/dir/ （默认打开浏览器）
cmd进⼊静态⽬录⼯程，可执⾏如下操作：
http-server ./ -o --port 8085 --proxy 192.168.11.120:8888/
当然该条命令也可以缩写成如下：
hs ./ -o -p 8085 -P 192.168.11.120:8888/
我们也可以初始化package.json，执⾏npm init -y，然后在package.json中的scripts字段中添加如下代码：
"scripts": {
"dev": "http-server  ./ -o --port 8089 --proxy 192.168.11.120:8888/"
}
最后执⾏npm run dev 也是⼀样的，使⽤http-server主要缺点是不能使浏览器⾃动刷新。
⽅式三：e x p r e s s搭建
使⽤express简单搭建
使⽤express搭建前端静态页⾯环境，在⼯程下新建build⽂件夹，建⼀个dev.js(开发环境启动⽂件)以及index.js（配置⽂件、如端⼝）。
我们只需要安装express以及http-proxy-middleware即可，如下：
npm i express http-proxy-middleware -D
index.js代码：
port: 8081,
host: 'localhost',
proxyTable: [{
api: '/api',
target: '192.168.1.112:8081/' }]
}
dev.js代码如下：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const {port = 8080,proxyTable = []} = require('./index.js');
const app = express();
app.use('/', express.static('./')); // 设置静态资源访问路径
proxyTable.forEach((item) => app.use(createProxyMiddleware(item.api, {
target: item.target, // ⽬标服务器 host
changeOrigin: true, // // 默认false，是否需要改变原始主机头为⽬标URL
ws: true// 是否代理websockets
})))
app.listen(port,() => {
console.log(`listen：${port}`);
})
在package.json中配置启动快捷键，如下：
"scripts": {
"dev": "node config/dev.js"
}
运⾏npm run dev即可启动本地服务器，本地运⾏localhost:8081即可（默认运⾏⼯程下的静态⽂件index.html），如果需要⽅法其他静态页⾯添加相应路径即可。
其中http-proxy-middleware实际就是将http-proxy封装，使⽤起来更加⽅便简单,⽼版本http-proxy-middleware参考：，其中
使⽤browser-sync实现热更新优化
代码如下：
const express = require('express');
const path = require('path');
const timeout = require('connect-timeout');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { port = 8080, proxyTable = [], host = 'localhost' } = require('./index.js');
const app = express();
const pathname = solve(__dirname, '../');
const bs = require('browser-sync').create('server');
app.use(timeout(60 * 1e3));
app.use((req, res, next) => {
if (!req.timedout) next();
});
app.use('/', express.static(`${pathname}`)); // 设置静态资源访问路径
proxyTable.forEach((item) => app.use(createProxyMiddleware(item.api, {
target: item.target, // ⽬标服务器 host
changeOrigin: true, // // 默认false，是否需要改变原始主机头为⽬标URL
ws: true// 是否代理websockets
})))
app.listen(port, () => {
bs.init({ // 开始⼀个Browsersync代理
proxy: `${host}:${port}`,
notify: true, // 通知
port: 8085,
// files: ['**'] // files 必须带上，不带上修改⽂件不会刷新；可以指定⽂件类型、⽂件等⽅式
files: [`${pathname}/resources/**/*.html`,`${pathname}/index.html`,`${pathname}/public/**/*.js`,`${pathname}/public/**/*.css`]
})
})
当然也可以⽤watch⽅法监听⽂件的变化，更改代码如下：
const express = require('express');
const path = require('path');
const timeout = require('connect-timeout');
const { createProxyMiddleware } = require('http-proxy-middleware');
const { port = 8080, hotUpdate = false, proxyTable = [], host = 'localhost' } = require('./index.js');
const app = express();
const pathname = solve(__dirname, '../');
const bs = require('browser-sync').create('server');
app.use(timeout(60 * 1e3));
app.use((req, res, next) => {
if (!req.timedout) next();
});
app.use('/', express.static(`${pathname}`)); // 设置静态资源访问路径
proxyTable.forEach((item) => app.use(createProxyMiddleware(item.api, {
target: item.target, // ⽬标服务器 host
changeOrigin: true, // // 默认false，是否需要改变原始主机头为⽬标URL
ws: true// 是否代理websockets
})))
bs.watch(`${pathname}/resources/**/*.html`).on("change", bs.reload);
bs.watch(`${pathname}/index.html`).on("change", bs.reload);
bs.watch(`${pathname}/public/**/*.js`, function(event, file) {
if (event === 'change') {
}
})
bs.watch(`${pathname}/public/**/*.css`, function(event, file) {
if (event === 'change') {
}
})
app.listen(port, () => {
bs.init({ // 开始⼀个Browsersync代理
proxy: `${host}:${port}`,
notify: true, // 通知
port: 8085
})
})
注：Browsersync让浏览器实时、快速响应⽂件变化并⾃动刷新，
⽅式四：使⽤nod e内置模块http启动服务
const http = require('http');
const fs = require('fs');
const path = require('path');
const httpProxy = require('http-proxy');
const childProcess = require('child_process'); // 可⾃动打开浏览器
const filepath = solve(__dirname,'./');
const proxy = ateProxyServer(); // 创建代理服务器
const {proxyTable = []} = require('./config/index.js');
proxyTable.forEach((item) => {
if(req.url.indexOf(item.api) !== -1) { // 匹配上接⼝代理
proxy.web(req,res,{target: item.target});
<('error',function(e) { // 代理失败处理
console.log(e);
})
} else {
if(err) {
res.writeHeader(404,{'content-type': 'text/html;charset="utf-8"'});
res.write('<h1>404错误</h1><p>你访问的页⾯/内容不存在</p>');
} else {
res.write(data);
}
}
})
})
}).listen(8080,() => {
console.log('服务启动了');
});
<('start localhost:8080/index.html');
然后在地址栏输⼊localhost:8080/index.html （其中我的index.html就放在根路径，根据具体路径填写）换⼀种⽅式：
const http = require('http');
const fs = require('fs');
const path = require('path');
const httpProxy = require('http-proxy');
const childProcess = require('child_process'); // 可⾃动打开浏览器
const filepath = solve(__dirname,'./');
const proxy = ateProxyServer(); // 创建代理服务器
const {proxyTable = []} = require('./config/index.js');
const server = new http.Server();
<('request',function(req,res){
proxyTable.forEach((item) => {
if(req.url.indexOf(item.api) !== -1) { // 匹配上接⼝代理
proxy.web(req,res,{target: item.target});
<('error',function(e) { // 代理失败处理
console.log(e);
})
} else {
if(err) {
res.writeHeader(404,{'content-type': 'text/html;charset="utf-8"'});
res.write('<h1>404错误</h1><p>你访问的页⾯/内容不存在</p>');
} else {
res.write(data);
}
}
})
})
})
server.listen(8080,() => {
console.log('服务启动了');
});
<('start localhost:8080/index.html');
⽅式五：Ng inx配置
conf主要的配置代码：
http {
# nginx负载均衡配置
upstream dynamic_balance {
#ip_hash;
server 192.168.100.123: 8081;
}
# 省略其他
server {
listen 80;
server_name localhost;
nginx部署前端项目#访问⼯程路径
root website;
index index.html index.htm;
#转发把原http请求的Header中的Host字段也放到转发的请求
proxy_set_header Host $host;
#获取⽤户真实IP
proxy_set_header X - real - ip $remote_addr;
proxy_set_header X - Forwarded - For $proxy_add_x_forwarded_for;        #接⼝转发
location /base/ {
proxy_pass http: //dynamic_balance;
}
#启⽤history模式（什么请求都只返回index.html）
location / {
try_files $uri $uri / /index.html;
}
}
}
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。