SSR을 지원하는 Vue-cli 3 구성 요소 라이브러리

SSR을 지원하는 Vue-cli 3 구성 요소 라이브러리

여러 도메인에서 공유할 사용자 지정 구성 요소 라이브러리를 만드는 중.

도메인:

• 각 도메인에는 고유한 nuxt 인스턴스가 있다.
• 각 도메인에는 다음이 있음my-component-lib에 등록된.package.json

• 각 도메인이 lib를 플러그인으로 등록

  //my-component-lib.js
  import components from 'my-component-lib'
  import Vue from 'vue'
  
  export default ({ store }) => {
   Vue.use(components, { store: store })
  }
  
  //nuxt.config.js
  plugins: [
    /*Desired option 1*/ '@/plugins/my-component-lib',
    /*Currently using*/ { src: '@/plugins/my-component-lib', ssr: false }
  ]
  

my-component-lib:

• vue-cli 3을 사용하여 설정

• 도서관은 기본 html 태그와 CSS ex로 구성되어 있다.<input ></input>스타일링이 중요하고 구성 요소와 잘 어울리고 싶다.(extract:false)css 파일을 가져올 걱정 없이 개별 구성 요소를 꺼낼 수 있도록.

  //vue.config.js
  module.exports = {
   outputDir: 'dist',
   lintOnSave: false,
   css: {
    extract: false
   }
  }
  

다음을 사용하여 프로덕션 설정"production": "vue-cli-service build --target lib --name sc components/index.js"

문제:

1. nnxt를 실행할 때 원하는 옵션 사용npm run dev나는 a를 얻는다.document is not defined작동 중인addStyle (obj /* StyleObjectPart */) {..}안쪽에sc.common.js
2. 현재 옵션을 사용하면 수화 오류가 발생함(The client-side rendered virtual DOM tree is not matching server-rendered content.)구성 요소를 안에 포장하면 고정됨<no-ssr>내가 하고 싶지 않은 태그.

SSR과 함께 작동하도록 구성 요소 라이브러리를 컴파일하고 큰 css 파일을 가져올 필요가 없음

변화하다

 ...
 css: {
  extract: false
 }
 ...

로true

참조URL: https://stackoverflow.com/questions/59314879/vue-cli-3-component-library-to-support-ssr