Vue-cli 3组件库支持SSR

Question

我正在创建一个我想跨多个域共享的自定义组件库。

域：

• 每个域都有自己的 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 }
  ]
  

我的组件库：

• 使用 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. 使用所需选项，当我运行 nuxt npm run dev 时，我在 sc.common.js 内的函数 addStyle (obj /* StyleObjectPart */) {..} 中得到一个 document is not defined
2. 使用当前选项，我得到一个水合错误(The client-side rendered virtual DOM tree is not matching server-rendered content.)，如果我将组件包装在我不想这样做的<no-ssr> 标签中，则该错误已修复。

我想编译我的组件库以使用 SSR 而不必导入大型 css 文件

Answer 1

改变

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

致true