umi 项目本地打包后如何本地运行

本项目 umi 版本为

"@umijs/max": "^4.0.0",

修改 config 配置文件

临时修改 config 文件

// config.ts 文件
publicPath: '/',

执行打包命令

yarn build 

查看 proxy.ts 配置

export default {
  dev: {
    '/api/': {
      target: 'http://81.40.35.215:8004',
      changeOrigin: true,
      pathRewrite: { '^/api': '/api' },
    },
  },
};

配置接口代理

安装依赖

npm install express http-proxy-middleware serve-static

使用 Express 配置本地服务器和接口代理。

这里有一个如何使用 Express 配置本地服务器和接口代理的简单例子：

// server.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();

app.use('/api', createProxyMiddleware({ 
  target: 'http://81.40.35.215:8004', // 根据上面 proxy.js 配置来
  changeOrigin: true,
  pathRewrite: {
    '^/api': '/api'
  }
}));


// 检查自己项目的打包输出目录是否为 dist 如不是，要更改为对应的
app.use('/', serveStatic(path.join(__dirname, 'dist')))

app.listen(3000);

在这个示例中，我们首先创建了一个 express 应用，然后为 '/api' 路径设置了一个代理，这个代理会将所有匹配 '/api' 的请求都转发到 'http://81.40.35.215:8004'。

接着，我们为 '/' 路径提供了静态文件服务，这个服务会提供 'dist' 目录下的文件。

最后，我们启动了这个应用，监听 3000 端口。

然后将上述代码保存为例如 server.js 文件，然后通过 node server.js 启动。这样就可以在 http://localhost:3000 获取到你需要的信息了。

总结

简单来说，需要在本地启动一个 http 服务器，用来处理静态文件资源和API接口转发，与本地开发时，配置 proxy.js 文件无异。