Vue CSR 기반 마이크로 전단 실현 방안 실천

여기 서 마이크로 전단 의 각종 장단 점 을 말 하지 않 고 중간 배경 관리 시스템 의 개발 을 맡 고 있다 고 가정 합 니 다.모든 업무 모듈 은 한 프로젝트 에 포장 되 어 있 습 니 다.업 무량 이 계속 증가 함 에 따라 컴 파일 이 점점 느 려 집 니 다.오래된 프로젝트 에서 새로운 업 무 를 독립 적 으로 개발 하고 독립 적 으로 배치 할 수 있 기 를 기대 합 니 다.오래된 프로젝트 에 마이크로 응용 형식 으로 끼 워 넣 습 니 다.
이 글 의 시청자 들 은 새로운 프로젝트 에서 오래된 프로젝트 를 바 꾸 지 않 아 도 되 는 전제 에서 마이크로 애플 리 케 이 션 을 삽입 하 는 것 입 니 다.이 글 이 도움 이 된다 면:+1:!
핵심 요소

생산 환경 코드 구축,원 격 구성 요소 출력 에 필요 한 JSON

ajax 요청 을 통 해 이 JSON 의 데 이 터 를 받 아 원 격 구성 요소

에 전달 합 니 다.
새로운 프로젝트 의 건설
프로젝트 의 구축 에 대해 서 는 여기 서 더 이상 자세히 설명 하지 않 겠 습 니 다.여러분 은Genesis프로젝트 가 빠르게 시작 되 는 문 서 를 직접 보 세 요.
컴 파일 코드 수정

import path from 'path';
import fs from 'fs';
import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = async () => {
 /**
  *         
  */
 const build = new Build(ssr);
 /**
  *         ，         
  */
 await build.start();
 /**
  *      ，       ，           
  */
 const renderer = ssr.createRenderer();
 /**
  * CSR      JSON
  */
 const result = await renderer.render({ mode: 'csr-json' });
 /**
  *   JSON         
  */
 fs.writeFileSync(
  path.resolve(ssr.outputDirInClient, 'app.json'),
  JSON.stringify(result.data, null, 4),
  'utf8'
 );
};
start();

만약 당신 이 공식 문서 에 근거 하여 간다 면,당신 은 스스로genesis.build.ts서 류 를 수정 하면 됩 니 다.파일 이름 을 사용자 정의 했다 면await build.start()방법 이 실 행 된 후에 렌 더러 를 만 들 고 CSR 렌 더 링 결 과 를 JSON 파일 에 저장 하면 됩 니 다.
컴 파일 이 끝 난 후에 당신 이 얻 은 것 은 대략 이런 파일 입 니 다.
 
너 는 단지client디 렉 터 리 의 정적 파일 을 서버 에 배치 하면 됩 니 다.
오래된 프로젝트 원 격 구성 요소 로드
정적 자원 의 기본 경로 가/ssr-genesis/라 고 가정 하면/ssr-genesis/app.json을 통 해 이 파일 에 접근 할 수 있 습 니 다.
오래된 프로젝트 에 원 격 구성 요 소 를 설치 하 십시오.

npm install @fmfe/genesis-remote axios

대응 하 는 경로 에서 원 격 구성 요 소 를 사용 하여 이 구성 요 소 를 불 러 오 면 됩 니 다.

<template>
 <div class="app">
  <RemoteView :fetch="fetch" />
 </div>
</template>
<script lang="ts">
import Vue from 'vue';
import axios from 'axios';
import { RemoteView } from '@fmfe/genesis-remote';

export default Vue.extend({
 components: {
  RemoteView
 },
 methods: {
  async fetch() {
   const res = await axios.get('/ssr-genesis/app.json');
   if (res.status === 200) {
    return res.data;
   }
   return null;
  }
 }
});
</script>

다 중 역사 모드 지원
오래된 프로젝트 에서 역사 모드 를 사용 하면 하위 응용 프로그램 에서 도 역사 모드 를 사용 하면router.push('/xxx')여러 개의 역사 기록 이 생 길 수 있 습 니 다.이 문 제 를 해결 하기 위해 서 는 하위 응용 프로그램abstract모드 를 사용 하거나@fmfe/genesis-app 을 사용 하여 여러 개의 Router 인 스 턴 스 를 사용 하여 역사 모드 에서 발생 하 는 BUG 를 처리 할 수 있 습 니 다.주의 하 세 요.새로운 프로젝트 에서@fmfe/genesis-app 포장 후의 Router 를 함께 사용 해 야 합 니 다.
넓히다

/**
 * CSR      HTML
 */
const result = await renderer.render({ mode: 'csr-html' });
/**
 *   html         
 */
fs.writeFileSync(
 path.resolve(ssr.outputDirInClient, 'index.html'),
 result.data
 'utf8'
);

CSR 프로젝트 만 하려 면 html 만 렌 더 링 하면 됩 니 다.일반적인 CSR 프로젝트 와 마찬가지 로client디 렉 터 리 를 서버 에 배치 합 니 다.
총결산
GenesisVue SSR 의 렌 더 링 라 이브 러 리 일 뿐 프레임 워 크 가 아 닙 니 다.가장 기본 적 인 SSR 렌 더 링 능력 을 제공 할 뿐 입 니 다.
Vue CSR 기반 의 마이크로 전단 실현 방안 실천 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue CSR 마이크로 전단 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!