支持 SSR 的 Vue-cli 3 组件库

Question

我正在创建一个自定义组件库，我想在多个域之间共享该库。

域：

• 每个域都有自己的nuxt实例
• 每个域名都my-component-lib注册package.json

• 每个域将库注册为插件

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

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

Answer 1

更改

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

到true