javascript - 在 Nuxt 中使用 Vue Design System 会引发有关 system.js 中导出的错误

我正在尝试按照此处的步骤将组件导入 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 时，它​​会构建，但我收到一条警告:



生成的 system.js 似乎存在与导出相关的问题(命令 npm run build:system )。

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



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



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

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

谢谢。

GitHub 上的存储库:

这是我的“主题”的存储库，但为了实现这一点，您需要创建一个与此名称相同的设计系统，并按照步骤将设计系统用作本地(文件)NPM 模块.

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

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

最佳答案

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

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，但我不确定结果是否仍然有效。

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

关于javascript - 在 Nuxt 中使用 Vue Design System 会引发有关 system.js 中导出的错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51026715/