umijs ssr 配置 详细案例
时间: 2024-09-13 08:12:08 浏览: 15
UmiJS是一个可插拔的企业级React应用框架,SSR(Server-Side Rendering)是指服务器端渲染,它可以在服务器上先生成HTML,然后发送给浏览器。UmiJS的SSR配置相对简洁,下面是一个简单的配置案例:
1. 首先,确保你已经安装了UmiJS。如果没有安装,可以通过npm或yarn进行安装:
```bash
npm install -g umi
# 或者
yarn global add umi
```
2. 接着,创建一个新的Umi项目,并选择SSR模板:
```bash
umi init ssr my-umi-app
cd my-umi-app
```
3. 安装项目所需的依赖包:
```bash
npm install
# 或者
yarn
```
4. 配置服务器端渲染。UmiJS通常会提供一个默认的配置文件`.umirc.ts`(或`config/config.js`),你可以在这个文件中配置SSR相关的选项。例如,你可以配置路由、代理等:
```typescript
// .umirc.ts
export default {
// 配置基础路由
routes: [
{ path: '/', component: '@/pages/index' },
{ path: '/user', component: '@/pages/user' },
// 更多路由...
],
// 开启SSR
ssr: true,
// 配置代理
proxy: {
'/api': {
target: 'http://your-target-api.com',
changeOrigin: true,
},
},
// 其他配置...
};
```
5. 编写服务端入口文件`src/server/index.js`,确保UmiJS能够正确地启动服务端渲染:
```javascript
import { createApp } from 'umi';
import routes from './routes'; // 引入路由配置
export default (context) => {
return createApp(routes).render(context);
};
```
6. 为了确保构建过程可以正确处理SSR,你需要在`package.json`中的脚本部分添加`build:server`命令,以及为服务端渲染添加`start:server`启动脚本:
```json
{
"scripts": {
"build": "umi build",
"build:server": "umi build --target ssr",
"start": "cross-env NODE_ENV=production node ./dist/server.js",
// 其他脚本...
}
}
```
7. 构建项目并运行:
```bash
npm run build:server
npm start
```
构建完成后,运行`npm start`命令,UmiJS将会启动服务端渲染,并通过Node.js服务器提供服务。