@meadmin/midway-vite-view

midway-vite-view

meadmin 的 midway+vite 服务端渲染和客户端渲染组件,支持Vite2、Vite3,支持多vite项目并存。

github

https://github.com/yuntian001/midway-vite-view

使用示例

https://github.com/yuntian001/midway-vite-view/tree/main/example

使用说明

midway+vite 依赖于静态文件托管组件：@midwayjs/static-file@3

所有静态文件需要按照@midwayjs/static-file@3规则放在对应的文件夹中,@midwayjs/static-file@3默认的静态文件夹为public

代码示例

example/

快速开始

• 安装组件扩展包

$ npm install vite
$ npm install midway-vite-view

• 项目根目录下新建public文件夹
• view 文件夹下创建放入对应vue项目
• midway configuration.ts中引入视图文件

import * as viteView from 'midway-vite-view';//引入view组件
@Configuration({
  imports: [
    //其余代码不变
    viteView, //导入view组件
  ],
})
//其余代码不变

• midway 中加入配置文件

  view: { //midwayjs 视图配置 说明参考 https://midwayjs.org/docs/extensions/render
    defaultViewEngine: 'viteView',
  },
  viteView: { //midway-vite-view 配置配置详细说明见下方
    rootDir:'view',
    views: {
      'admin': {//相对于rootDir的前端包路径
        // entryServer: 'admin/src/entry-server.ts',//admin暂未支持服务端渲染
        entry: 'index.html',//html入库文件，相对于当前包路径
        viteConfigFile: resolve(import.meta.dirname, '../../view/admin/vite.config.ts'),
        staticFileKey:'viewAdmin',
        hmrPort:23679,
      },
      'index': {//相对于rootDir的前端包路径
        entryServer: 'src/entry-server.ts',
        entry: 'index.html',//html入库文件，相对于当前包路径
        viteConfigFile: resolve(import.meta.dirname, '../../view/index/vite.config.ts'),
        staticFileKey:'viewIndex',
        hmrPort:23680,
      },
    },
  },
  staticFile: {
    dirs: {
      default: {
        prefix: '/',
        dir: 'public',
      },
      viewAdmin:{
        prefix: '/html/admin/',
        dir: 'view/admin/dist',
      },
      viewIndex:{
        prefix: '/html/index/',
        dir: 'view/index/dist',
      },
    },
  },

• vite 配置文件中 按示例进行更改

• 控制器中调用

    //服务端渲染 
    return this.ctx.render('admin', {
      assign:{keyWords:'vite midway'},//html中{{keyWords}}的会被替换为vite midway
    });

    //客户端渲染
    return this.ctx.render('index',{
      ssr:false, //false代表强制客户端渲染,默认会根据配置自动匹配
      assign:{keyWords:'vite midway'},//html中{{keyWords}}的会被替换为vite midway
    });

• package.json中打包命令加入 && vite-view build

     "build": "midway-bin build -c && vite-view build"

配置说明

打包命令 vite-view build 参数说明

传参方式为 vite-view build

规则说明

• 服务端渲染时html 文件中<!--ssr-no-content-start--> <!--ssr-no-content-end-->间的内容会被清空（客户端渲染时不做任何处理）
• 服务端渲染时html 文件中必须含有<!--app-html-->,输出时会替换为解析后的html内容
• 服务端渲染时html 文件中必须含有<!--preload-links-->,输出时会替换为资源引用语句
• vue 服务端渲染时不会触发响应性，建议vue3在setup中用顶层await获取数据