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

Question

我正在尝试按照以下步骤将组件导入 Nuxt 项目： https ://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an- npm 模块

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 在 ./plugins/vue-design-system.js 7:8-14 “export 'default' (imported as 'system') is not found in 'fp-design-system' 中编译时出现 1 个警告警告”

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

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

NuxtServerError 无法从“/Users/paranoidandroid/Documents/websites/Nuxt-SSR”中找到模块“fp-design-system/src/elements/TextStyle”

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

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

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

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

谢谢。

GitHub上的存储库：

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

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

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

标签： javascriptvue.jsnuxt.jsserver-side-rendering

Answer 1

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

在 ES6 中是

export default myModule

在 ES5 中是

module.exports = myModule

希望它会有所帮助。