在 Nuxt 中使用 Vue 设计系统会引发有关在 system.js 中导出的错误答案

【问题标题】：Using Vue Design System in Nuxt is throwing errors about export in system.js在 Nuxt 中使用 Vue 设计系统会引发有关在 system.js 中导出的错误
【发布时间】：2018-06-25 15:11:07
【问题描述】：

我正在尝试按照以下步骤将组件导入 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 编译时包含 1 个警告警告 ./plugins/vue-design-system.js 7:8-14 "export 'default' (导入为 '系统'）在'fp-design-system'中找不到

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

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

NuxtServerError 找不到模块 'fp-design-system/src/elements/TextStyle' 来自 '/Users/paranoidandroid/Documents/websites/Nuxt-SSR'

如果我用力刷新页面，我会收到另一条消息：

NuxtServerError 渲染函数或模板未在组件中定义：匿名

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

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

谢谢。

GitHub 上的存储库：

这是我的“主题”的 repo，但为了实现这一点，您需要创建一个与其同名的设计系统，并按照步骤将设计系统用作本地（文件) NPM 模块。

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

系统的console.log（来自JS导入语句）

【问题讨论】：

'fp-design-system' 是您创建的模块吗？它说没有默认导出，所以您可能需要检查模块上的导出是否正确定义？
这个导出来自Vue设计系统生成的JS文件（system.js）。看起来它有一个出口就好了。
那你不应该从‘vue-design-system’而不是‘fp-design-system’导入吗？
不，因为 fp-design-system 是我们从 vue-design-system 创建的设计系统。它成为它自己的 npm 依赖项。见这里：github.com/viljamis/vue-design-system/wiki/…
@MunimMunna 我还尝试了一个新的设计系统，除了名称之外没有任何自定义，并且我在 Nuxt 中收到有关“未定义窗口”的错误......可能是由于 SSR。也许 Vue 设计系统不支持 SSR。开发人员还没有回复我。

标签： javascript vue.js nuxt.js server-side-rendering

【解决方案1】：

至于您的第一个错误（“"export 'default' (imported as 'system') was not found in 'fp-design-system'”），UMD 从 vue-design-system 构建的 JS 不会导出“默认”对象。但是您可以通过将其导入为：

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

代替：

import system from 'fp-design-system'

然后，正如您在 cmets 中注意到的那样，另一个问题很快就出现了：“window is not defined”，这又是由于 UMD 构建的 JS 期望 window 在全球范围内可用，而不是使用 this 的通常技巧（其中等于浏览器中的window）。因此，构建与 SSR 不兼容。

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

您最好将此模块仅用于客户端渲染。

【讨论】：

【解决方案2】：

似乎 Vue 正在寻找用于导入模块的 ES6 模式，您应该将其用于外部 javascript 模块/文件。

在 ES6 中是

export default myModule

在 ES5 中是

module.exports = myModule

希望它会有所帮助。

【讨论】：