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 }
]

my-component-lib：

使用vue-cli 3进行设置
该库由基本html标记和CSS <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"

进行生产设置

问题：

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

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

Answer 1

更改

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

到true

支持SSR的Vue-CLI 3组件库

1 个答案: