当前位置：首页 > wzjs >正文

中国网络营销网站广州网页定制多少钱

wzjs 2025/7/28 9:26:54

中国网络营销网站,广州网页定制多少钱,网站建设珠海新盈科技,建筑公司简介模板范本服务搭建应用场景前端模块化基本成为了不可或缺的一步了，最近学习的时候，使用了EsModule语法，但使用import和export，会产生跨域问题，故自己本地搭建一个服务（不需要下载npm包），一步…

服务搭建应用场景

前端模块化基本成为了不可或缺的一步了，最近学习的时候，使用了EsModule语法，但使用import和export，会产生跨域问题，故自己本地搭建一个服务（不需要下载npm包），一步解决，真是超简单；

还有之前用过的接口转发（解决跨域）服务搭建，一起分享出来，希望可以帮助到各位程序yuan～

当然跨域除了服务接口转发方式以外，还可以用vue的devServer配置，还有Nginx反向代理，对于Nginx反向代理感兴趣的可以看看我的这篇博客～https://blog.csdn.net/weixin_44258964/article/details/146103202

服务搭建

极简服务搭建【解决本地跨域】

用到的是Node的内置模块http、fs、path，其中http用于创建、启动服务，fs则读取文件, path 设置路径
终端cd [目录下]，执行命令node server.js执行即可获取到端口号3000的本地服务

废话不多说，直接上代码

const http = require('http');
const fs = require('fs');
const path = require('path');// 常见文件类型映射
const extNameMap = {'.html': 'text/html','.js': 'text/javascript','.css': 'text/css','json': 'application/json','.png': 'image/png','.jpg': 'image/jpg'
}// 创建 HTTP 服务器
const server = http.createServer((req, res) => {// 获取请求的 URL 路径const url = req.url;// 根据 URL 路径返回对应的文件let filePath = path.join(__dirname, url === '/' ? 'index.html' : url);// 读取文件并返回fs.readFile(filePath, (err, data) => {if (err) {// 如果文件不存在，返回 404res.writeHead(404, { 'Content-Type': 'text/plain' });res.end('404 Not Found');} else {// 根据文件类型设置 Content-Type，path.extname读取文件后缀名const extname = path.extname(filePath);const contentType = extNameMap[extname]// 返回文件内容res.writeHead(200, { 'Content-Type': contentType });res.end(data);}});
});// 启动服务器，监听端口
const PORT = 3000;
server.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

以上就是一个服务器的简单搭建了，是不是巨简单
亲测好用，基本可以解决import 的跨域问题～

接口转发服务搭建

启动一个简易服务器，转发服务端接口（见proxy），其余路由指向index.html
使用的是express 搭建服务http-proxy-middleware 中间件转发服务接口
使用express.static创建dist静态资源服务器，在使用express.use可以进行托管中间件

proxy文件配置createProxyMiddleware参数结构

//proxy文件
module.exports = {dev: {'/api/': {target: 'https://xxx',changeOrigin: true,}},pre: {'/api/': {target: 'https://xxx',changeOrigin: true,}}
}
// createProxyMiddleware参数结构
{target: 'http://www.example.org/api',changeOrigin: true,}

服务搭建代码：

const path = require('path');
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');// 用于获取环境 process.argv - ['--env=dev']
function getArgs(args) {return args.reduce((argsDict, item) => {const [key = '', value] = item.split('=');return {...argsDict,[key.replace(/-/gi, '')]: value,};}, {});
}
const { env = '' } = getArgs(process.argv.slice(2));// 用于获取接口配置
const proxy = require('./proxy');const app = express();
const port = 8002; // 自定义端口号（不要与已存在端口冲突）// 转发所有接口服务
Object.keys(proxy[env]).forEach((route) => {app.use(route, createProxyMiddleware(proxy[env][route]));
});
// express.static创建dist静态资源服务器，在使用express.use可以进行托管
app.use(express.static(path.join(__dirname, '..', '/dist'))); // dist 是项目的打包资源路径，一般为根目录下distapp.get('/*', function (req, res) {res.type('text/html');res.sendFile(path.join(__dirname, '..', '/dist/index.html'));
});app.listen(port, () => {console.log('目前使用环境：', env);console.log(`服务器 ${port} 开启成功!`);
});