标签: nuxtjs3

在 Nuxt 3 中，如何从 url 中删除尾部斜杠？

在 Nuxt 2 中，这是通过将这些行添加到来完成的nuxt.config.js：

router: {
    trailingSlash: false
  }

Nuxt 3 中的等效项是什么？

我尝试将外部 javascript 文件添加到nuxt.config.ts。但 nuxt 没有加载该文件。

nuxt.config.ts文件：

export default defineNuxtConfig({

    css: [
        'bootstrap/dist/css/bootstrap.min.css'
    ],
    script: [
        {
            src: 'script.js',
        }
    ],
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    }
})

我有这段代码可以从https://fakestoreapi.com/products/获取 API 数据

<template>
<div>


</div>
</template>


  <script>  
  definePageMeta({
    layout: "products"
  })

export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('https://fakestoreapi.com/products/')
    console.log(res.data)
  },
}
</script>

我已经安装了 axios 并且nuxt.config.ts有：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({

    app: {
        head: {
            title: 'Nuxt',
            meta: [
                { name: 'description', content: 'Everything about - Nuxt-3'}
            ],
            link: [
                {rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
            ]
        }
    },
    runtimeConfig: {
        currencyKey: process.env.CURRENCY_API_KEY
    },
    modules: …

我想动态创建 3 张卡片。每张卡都有一个图像，我想为每张卡动态设置一个路径，但我无法使用波浪号，~因为波浪号不会转换为绝对路径：

<img
        :src="'~/assets/images/how-to-use/image1.jpg'"
        :alt="part.title"
      />

我收到此错误：

GET http://localhost:3000/~/assets/images/how-to-use/image2.jpg 404 (Page not found: /~/assets/images/how-to-use/image1.jpg)

我设置buildAssetsDir为example但我什至不能这样做：

GET http://localhost:3000/~/assets/images/how-to-use/image2.jpg 404 (Page not found: /~/assets/images/how-to-use/image1.jpg)

该代码在构建时间后将不起作用。但为什么？

我对 nuxt3 很陌生，想知道是否可以将它与类星体一起使用。特别是类星体有自己的ssr系统。有人用这两个框架成功创建了一个项目吗？

我试图查看是否有任何使用这两个框架的开源项目，但我找不到任何有用的东西

我正在使用 Nuxt 3

这是目录结构

图像是这样加载的

<img src="/images/index/pic-left.svg" />

我也尝试过（从不开始/）

<img src="images/index/pic-left.svg"  />

又没用了

有什么问题 ？

我正在 Nuxt 3 中使用 SSR 构建前端网站，后端使用 Laravel。在 Nuxt 3 项目中，我的utils目录中有一个 ApiBridge.js 文件，我用它来组织 API 调用、设置基本 URL 等。自从启动该项目以来，我一直在关闭服务器端渲染的情况下运行该文件。方便，但是当我尝试在 SSR 打开（在 nuxt.config.js 中打开）的情况下运行它时，我收到“Nuxt 实例不可用”错误。我一边忙于这个项目，一边在旅途中学习 Nuxt 3，所以我可能会错过一些明显的东西。

import axios from "axios";

const runtimeConfig = useRuntimeConfig()

const api = axios.create({
    baseURL: runtimeConfig?.API_BASE_URL,
    withCredentials: true,
});


const apiBridge = {
    login: (info) => api.post('/login', {
        ...info,
    }),

    register: (info) => api.post('/register', {
        ...info,
    })

    /* .... */
}

export default apiBridge;

为什么会发生这种情况？这是一个不好的方法吗？如何修复它？为什么在 SSR 关闭的情况下它还能工作？是因为汽车进口吗？提前致谢！

浏览了一下网络，但没有发现任何有用的东西。

编辑：nuxt.config.js 根据评论的要求

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [ …

vite-plugin-pwa更具体地说，我正在尝试将 Nuxt 3 PWA 粘合在一起@vite-pwa/nuxt。我安装了模块并设置了基本配置（我基本上遵循了这个视频）

我想要的是

我想要实现的第一个功能是在固定时间向用户发送推送通知。即使他们不在应用程序中，他们也应该收到推送通知。这就是我添加 PWA 模块的原因。

我不明白的是

我不知道如何添加我的自定义服务人员。如果我理解正确，我可以编写一个服务工作人员，它只需使用通知 API 向我的应用程序发送推送通知。不需要像 OneSignal 这样的服务（对吧？）。

据我了解，Vite PWA 文档在底层使用了 google 的工作箱，默认情况下它会生成一个服务工作者。如果您设置injectRegister: \'script\'它应该在我的应用程序的头部注入服务工作者注册（如此处所述）。

现在，当我通过开发人员工具搜索源代码时，我找不到任何 serviceWorker 脚本。奇怪的是，当我进入开发工具中的应用程序选项卡时，我可以看到 Service Workerdev-sw.js已注册。这是怎么添加的？

\xe2\x80\x8b

我想我必须在配置中设置一种模式来告诉工作箱不要为我生成服务工作人员注册。此模式应称为injectManifest，如此处和此处所述。但同样，我如何将其添加到我的代码中？

正如文档中所建议的，我还查看了 elk 存储库。但不幸的是他们采取了不同的方法，目前不使用 vite-pwa/nuxt。

如何添加自定义 Service Worker 来发送推送通知？

是否有人有 Nuxt 3 中的 PWA 经验，特别是与 Service Worker 合作并发送推送通知的经验？

Nuxt: 3.6.2
Pinia: 2.1.4
@pinia/nuxt: 0.4.11

在为 Pinia 定义 Nuxt 3 插件时，我需要访问 nuxtApp 上存在的 $pinia 实例。

该defineNuxtPlugin()函数传递参数nuxtApp. https://nuxt.com/docs/guide/directory-struct/plugins#creating-plugins

当我从该参数解构时（如此处$pinia的 pinia 文档所示），我收到以下类型错误：$pinia 的类型未知

但是当我调用useNuxtApp()该$pinia函数时defineNuxtPlugin()，我可以访问它。 $pinia 可通过 useNuxtApp() 获得

知道为什么我的 pinia 示例对我不起作用吗？

到目前为止，我已遵循 Nuxt 3 / Pinia 安装指南，如下所述： https: //pinia.vuejs.org/ssr/nuxt.html#installation

我尝试使用Nuxt 3 中的 useFetch 可组合pending项status来禁用按钮并在 POST 请求挂起时显示微调器，如下所示：

const { pending, status, execute } = await useFetch("/notifyme", {
  immediate: false,
  baseURL: config.public.apiBase,
  method: "POST",
  body: {
    email: email.value,
  },
});

当如下使用时pending，即使在发出请求之前，该按钮也会被禁用，并且默认情况下会显示微调器：

<button
:disabled="pending"
type="submit">
Notify me
<ButtonSpinner v-show="pending" />
</button>

当status如下使用时，按钮不会被禁用，并且在发出请求时微调器不会显示：

<button
:disabled="status==='pending'"
type="submit">
Notify me
<ButtonSpinner v-show="status==='pending'" />
</button>

我对如何使用pending和statususeFetch 以及为什么它们如此相似而存在感到困惑。