gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:28:22 24 4
gpt4 key购买 nike

我正在尝试按照此处的步骤将组件导入到 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语句)

enter image description here

最佳答案

至于你的第一个错误(“”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,但我不确定结果是否仍然有效。

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

关于javascript - 在 Nuxt 中使用 Vue 设计系统会抛出有关在 system.js 中导出的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51026715/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com