标签: nuxtjs3

我正在尝试设置 Nuxt3 与 Pinia 一起工作。

采取的步骤：

• 从一个活跃的 nuxt3 项目开始
• 跑npm install @pinia/nuxt
• 这失败了，出现依赖错误，所以重新运行npm install @pinia/nuxt --legacy-peer-deps，效果很好
• 将 pinia 添加到我的 nuxt.config.ts 中，现在看起来像：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    meta: {
        link: [
            {
                rel: "stylesheet",
                href:"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
            }
        ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2', crossorigin: 'anonymous' }
      ]
    },
    ssr: false,
    buildModules: ['@pinia/nuxt'],
    base: '/',
})

• 重新启动服务器
• 出现以下错误：

GET http://localhost:3000/_nuxt/@id/pinia/dist/pinia.mjs net::ERR_ABORTED 404 (Not Found)

我一直在谷歌搜索，无法弄清楚这里出了什么问题......我尝试取出 nuxt.config.ts 中的“base”参数，但这也没有帮助。如果我取出 pinia 声明，一切都会正常。

我在 Google Cloud Run 上部署了一个简单的 Nuxt（版本 3）应用程序，并使用 Lighthouse 测试了性能。分数非常糟糕，但它提供的最有影响力的改进之一是启用文本压缩（gzip 或 brotli）。

我能够在 nuxt 配置中实现服务器输出.mjs.br文件：vite-plugin-compression

import viteCompression from "vite-plugin-compression";

export default defineNuxtConfig({
  vite: {
    plugins: [viteCompression({ algorithm: "brotliCompress" })],
  },
...

尽管.mjs.br生成了文件，但.mjs默认情况下仍在提供文件。

如何让 Nuxt 提供 brotli 压缩文件？或者这还不可能吗？

我将vue-fontawesome与 Nuxt 3 一起使用，如此处所述，我看到了这种奇怪的行为。说我有这样的东西

<a href="https://example.com"><font-awesome-icon icon="fa-brands fa-twitter" />Example</a>

如果我运行开发服务器，一切都很好，但如果我generate通过静态 HTTP 服务器运行并提供输出，我会打印两次“示例”。如果我将文本包装在标签中，我会得到标签和文本两次（即<span>Example</span><span>Example</span>）。但奇怪的是，生成的 HTML 不包含重复内容，所以我怀疑浏览器中发生了一些奇怪的事情。

您可以从此处获取生成的站点作为可重现的测试用例。https://andreafranceschini.org/files/afnuxt.tgz

我听说vue-fontawesome对 SSR 和静态生成不太满意，但我也看到其他人以同样的方式使用它，所以我想知道我可能做错了什么？

编辑我也将其作为“错误”发布在这里。

编辑2解决方法是将图标单独包含在其他东西中，例如标签span。

我想在 Nuxt v3 中实现一个轮播组件。该组件接收一系列项目。该组件仅实现逻辑，而不实现样式或结构。

现在这是我的组件：

components/tdx/carousel.vue

<template>
  <div>
    <slot name="last"></slot>
    <div v-for="item in items">
      <slot
        name="item"
        v-bind="item"
      ></slot>
    </div>
    <slot name="next"></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  items: {
    type: [],
    required: true,
  },
  spotlight: {
    type: Number,
    default: 1,
    validator(value: number) {
      return value > 0;
    },
  },
});
</script>

这里轮播的逻辑并不重要。

在父组件中，我可以像这样使用该组件：

<template>
  <div class="container">
    <TdxCarousel :items="exampleArray">
      <template #item="{ title, description }">
        <p class="font-semibold text-2xl">{{ title }}</p>
        <hr />
        <p>{{ description }}</p>
      </template>
    </TdxCarousel>
  </div>
</template> …

我想从自定义 nuxt 模块添加可组合项，并在组件中使用它们而无需导入。

现在我必须使用#import，因为没有它我会收到错误（500 - useTest 未定义）。我有这样的东西，有什么想法可以实现这个目标吗？

// src/module.ts
import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  addPlugin,
  createResolver,
  addComponent,
  addImportsDir,
} from "@nuxt/kit";

export interface ModuleOptions {
  addPlugin: boolean;
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  defaults: {
    addPlugin: true,
  },
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);
    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));

    addImportsDir(resolve(runtimeDir, "composables"));
  },
});

// src/runtime/composables/useTest.ts
export function useTest() {
  console.log("run useTest");

  return {
    test: () => { …

我正在尝试从目录导入全局 Sass 样式表/assets，并使用在整个组件中定义的变量和混合等内容。我nuxt.config.ts目前的样子是这样的：

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    styleResources: {
        sass: ["@/assets/styles/main.sass"],
    },
    build: {
        extractCSS: true,
        styleResources: {
            sass: "@/assets/styles/main.sass",
            hoistUseStatements: true,
        },
    },
    // buildModules: ["@nuxtjs/style-resources"], // This throws error
    vite: {
        css: {
            loaderOptions: {
                sass: {
                    additionalData: ` @import "@/assets/styles/main.sass"; `,
                },
            },
        },
    },
});

当我现在尝试使用变量时，出现[plugin:vite:css] Undefined variable.错误。这曾经在 Nuxt 2 中工作得很好@nuxtjs/style-resources，但我不确定如何在 Nuxt 3 中工作。

但是，该样式表中的类和应用样式正在工作，只有变量、混合和映射不可访问。

有人可以帮忙吗？

设置：我使用 Nuxt3 + Pinia + VueUse。

目标： 我想通过 VueUse: 将 pinia 商店的状态保存到本地存储useStorage。

问题： 由于某种原因，本地存储中没有创建任何项目。我觉得我在这里错过了一些东西。在组件中我可以useStorage很好地使用。

在商店/piniaStoreVueUse.js

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: useStorage('my-state', 'empty'),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

在组件/SampleComponentStatePiniaVueUse.vue

<script lang="ts" setup>
    import { usePiniaStoreVueUse } from '~/stores/piniaStoreVueUse'; …

我正在创建一个 Nuxt 3 应用程序，当我运行时它工作正常npm run dev。虽然当我想构建应用程序时，npm run build我收到此错误：

[vite:resolve] Missing "./preload-helper" export in "vite" package

我使用的是Nuxt版本3.0.0-rc.6

我的package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "test:unit": "vitest --config ./vitest.config.js"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "~3.0.0",
    "@vue/test-utils": "~2.0.0",
    "jsdom": "~20.0.0",
    "nuxt": "3.0.0-rc.6",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "vitest": "~0.18.0"
  }
}

我的 nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  autoImports: {
    dirs: [
      // Scan composables …

尝试将任何默认参数或标头（在本例中为 json Web 令牌作为身份验证标头）添加到 $fetch 可组合项，这样我就不必这样做

await $fetch('/api/example', {
  headers: {
    // authentication header and jwt here
  }
});

对每一个请求。我找到了一种方法，通过将 $fetch 包装在另一个可组合项中（在本例中为 $api）来实现此目的，但这删除了 ​​api 响应上的任何类型，因此这不是我想要做的事情。

即使是像这样的简化 api.ts 可组合项

export const $api = (url: string) => {
  return $fetch(url);
}

不会给我前端空白 $fetch 会给我的 api 结果的响应类型。

我可以以某种方式在 $fetch 中注入默认值吗？也许通过模块/插件/拦截器？如果没有，有没有办法将 $fetch 包装在可组合项中并仍然保留响应类型？

我正在使用 nuxt3，$fetch 是 ohmyfetch 并且我没有使用 @nuxt/auth 包顺便说一句

当我使用此命令创建新的 Nuxt 3 项目时：

npx nuxi init nuxt-app

它输出这个错误：

 ERROR  (node:1752) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                         09:53:25
(Use `node --trace-warnings ...` to show where the warning was created)


 ERROR  Failed to download template from registry: fetch failed                                                                                  09:53:25

  at /C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/chunks/init.mjs:13269:11
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async downloadTemplate (/C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/chunks/init.mjs:13268:20)
  at async Object.invoke (/C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/chunks/init.mjs:13336:15)
  at async _main (/C:/Users/myname/AppData/Local/npm-cache/_npx/a95e0f536cf9a537/node_modules/nuxi/dist/cli.mjs:50:20)

我的环境：

• 操作系统：Windows 11
• 节点版本：18.12.0
• npm 版本：8.12.1

起初我怀疑这是由于我的网络造成的。但是当我尝试安装其他 npm 包时没有收到错误。