首页 文章

在Nuxt中使用Vue Design System会在system.js中抛出有关导出的错误

提问于
浏览 次
3

我正在尝试将组件导入到Nuxt项目中，遵循以下步骤：https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module

Nuxt没有 main.js （一切都是基于插件的），所以我所做的就是创建一个"plugin"然后在那里执行导入代码（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 时，它会构建，但是我收到警告：

警告在./plugins/vue-design-system.js中编译了1个警告警告7：8-14在'fp-design-system'中找不到“export'default'（导入为'system'）

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

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

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

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

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

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

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

谢谢 .

Repository on GitHub:

这是我的“主题”的回购，但为了实现这一目标，您需要创建一个与此名称相同的设计系统，并按照步骤将设计系统用作本地（文件）NPM模块 .

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

console.log of system （来自JS import语句）

enter image description here

javascript vue.js nuxt.js ssr vue-design-system

2 回答

  • 0

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

    在ES6中它是

    export default myModule

    在ES5中它是

    module.exports = myModule

    希望它会有所帮助 .

    回复于
  • 0

    至于你的第一个错误（“ "export 'default' (imported as 'system') was not found in 'fp-design-system' "), the UMD built JS from vue-design-system does not export a " default”对象 . 但你可以通过导入它来解决问题：

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

    代替：

    import system from 'fp-design-system'

    然后你在评论中注意到了另一个问题：“ window is not defined ”，再次由于UMD构建的JS希望 window 全局可用，而不是通常使用 this 的技巧（在浏览器中等于 window ） . 因此，实际上，构建不能与SSR兼容 .

    然而，你可以通过用 this 替换第一次出现的 window 来略微修改构建的JS，但我不确定结果是否仍然有效 .

    最有可能你应该更好地保留这个模块仅用于客户端渲染 .

    回复于

相关问题