指南
指南

Vue

这里提供了一个简单的 Vue2、Vue3 支持，如果它满足不了你的需求，你可以自己实现，这里有源码参考。

TIP

自定义实现，需要基于 @gez/rspack 来实现，Vue 相关的配置，可以在这里了解。

安装依赖

Vue2

完整的例子， 点击这里

npm
yarn
pnpm
bun
npm install @gez/rspack-vue vue@2.7.16 vue-tsc vue-server-renderer@2.7.16 -D

entry.node.ts

import type { GezOptions } from '@gez/core';

export default {
    // ...... 省略若干配置
    async createDevApp(gez) {
        return import('@gez/rspack-vue').then((m) => m.createVue2App(gez));
    }
} satisfies GezOptions;

entry.server.ts

import type { RenderContext } from '@gez/core';
import { createRenderer } from 'vue-server-renderer';
import { createApp } from './create-app';

const renderer = createRenderer();

export default async (rc: RenderContext) => {
    const script = await rc.script();

    const { app } = createApp();
    const vueCtx = {
        renderStyles: () => ''
    };
    const html = await renderer.renderToString(app, vueCtx);

    rc.html = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gez</title>
    ${vueCtx.renderStyles()}
</head>
<body>
    ${html}
    ${script}
</body>
</html>
`;
};
TIP

内部系统，还在大量使用 Vue2，未来 5 年还好持续维护。

Vue3

完整的例子， 点击这里

npm
yarn
pnpm
bun
npm install @gez/rspack-vue vue -D

entry.node.ts

import type { GezOptions } from '@gez/core';

export default {
    // ...... 省略若干配置
    async createDevApp(gez) {
        return import('@gez/rspack-vue').then((m) => m.createVue3App(gez));
    }
} satisfies GezOptions;

entry.server.ts

import type { RenderContext } from '@gez/core';
import { renderToString } from 'vue/server-renderer';

import { createApp } from './create-app';

export default async (rc: RenderContext) => {
    const { app } = createApp('server');
    const script = await rc.script();
    const body = await renderToString(app, {});
    rc.html = `
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Gez</title>
  </head>
  <body>
      ${body}
      ${script}
  </body>
  </html>
  `;
};
TIP

例子不够完整，欢迎提交 PR 补充完整例子。