javascript - 在 Nuxt 中使用 Vue 设计系统会抛出有关在 system.js 中导出的错误

Question

我正在尝试按照此处的步骤将组件导入到 Nuxt 项目中: https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module

Nuxt 没有 main.js(一切都是基于插件的)，所以我所做的是创建一个“插件”，然后像这样在其中执行导入代码(Nuxt 推荐这个也适用于其他图书馆并且工作正常):

vue-design-system.js

import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'

Vue.use(system)

然后在我的配置中我做了(删除了配置中的其他代码):

nuxt.config.js

module.exports = {
  css: [
    { src: 'fp-design-system/dist/system/system.css', lang: 'css' }
  ],
  plugins: [
    { src: '~plugins/vue-design-system', ssr: true }
  ]
}

当我在我的主题中运行 npm run dev 时，它会构建，但我收到警告:

WARNING Compiled with 1 warnings warning in ./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as 'system') was not found in 'fp-design-system'

生成的 system.js 似乎有关于导出的问题(命令 npm run build:system)。

在我的屏幕页面中，尝试在设计系统中使用组件时出现以下错误:

NuxtServerError Cannot find module 'fp-design-system/src/elements/TextStyle' from '/Users/paranoidandroid/Documents/websites/Nuxt-SSR'

如果我硬刷新页面，我会收到另一条消息:

NuxtServerError render function or template not defined in component: anonymous

知道这里发生了什么吗？以某种方式让它工作真的很棒。

目前，我不确定这是 Nuxt 问题还是 Vue 设计系统问题。我认为是后者，只是因为我现在拥有的 Nuxt 设置非常简陋……所以这不是其他原因造成的。

谢谢。

GitHub 上的存储库:

这是我的“主题”的存储库，但为了让它继续下去，您需要创建一个与此分离的同名设计系统，并按照步骤将设计系统用作本地(文件) NPM 模块。

https://github.com/michaelpumo/Nuxt-SSR

系统的console.log(来自JS import语句)

Answer 1

至于你的第一个错误(“”export 'default' (imported as 'system') was not found in 'fp-design-system'”)，UMD 从 vue- design-system 不会导出“默认”对象。但您可以通过将其导入为简单地解决此问题:

import * as system from 'fp-design-system'

代替:

import system from 'fp-design-system'

然后另一个问题很快出现，正如您在评论中注意到的那样:“window is not defined”，再次由于 UMD 构建的 JS 希望 window 全局可用，而不是使用 this 的常用技巧(在浏览器中等于 window)。因此，构建与 SSR 不兼容。

不过，您可以通过将第一次出现的 window 替换为 this 来稍微修改构建的 JS，但我不确定结果是否仍然有效。

很可能你最好只保留这个模块用于客户端渲染。