小编kis*_*ssu的帖子

我试图访问环境变量，起初，我收到一条错误消息process is not defined。

然后我尝试了这个，但我不确定为什么它不起作用

.env

VITE_BASE_URL="https://jikan1.p.rapidapi.com/"
VITE_HOST="jikan1.p.rapidapi.com"
VITE_KEY="abcdefghij12345678"

页面.jsx

let api = {
  base: import.meta.env.VITE_BASE_URL,
  host: import.meta.env.VITE_HOST,
  key: import.meta.env.VITE_KEY
};

function Upcoming() {
      

    console.log(api);
    return (
      <div>
      <p>{api.host}</p>
      <p>{api.base}</p>
      <p>{api.key}</p>
    </div>
)
}

我只得到 api.host 但基础和密钥未定义

有人可以告诉我我在这里做错了什么吗？

我花了很多时间在互联网上搜索一种简单直接的方法来在我的 nuxt 项目上实现 Firebase FCM 推送通知，但没有结果。

我有一个与 asyncData() 完美配合的组件，但我想使用 fetch() 代替。问题是，当使用 fetch 方法时，“car”属性永远不会更新。我错过了什么吗？

不起作用：

data() {
  return {
    car: null,
  }
},
async fetch({ $axios, route }) {
  this.car = await $axios.$get('/cars/' + route.params.id)
},

完美运行：

data() {
  return {
    car: null,
  }
},
async asyncData({ $axios, route }) {
  const response = await $axios.$get('/cars/' + route.params.id)
  return { car: response.data }
},

我的后端（API 端点）正在 https://localhost:44308/api 上运行。在这种情况下，Nuxt3.js 会给出以下错误：

request to https://localhost:44308/api/menus failed, reason: self signed certificate ()
at async $fetchRaw2 (/C:/D/MyApp/Source/WebUser/app/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
at async Proxy.fetchData (/C:/D/MyApp/Source/WebUser/app/.nuxt/dist/server/server.mjs:52133:22)
at async setup (/C:/D/MyApp/Source/WebUser/app/.nuxt/dist/server/server.mjs:68832:5)

我的代码：

async fetchData() {
      const config = useRuntimeConfig();
      const result = await $fetch(`${config.apiBase}/menus`, {
        headers: {
          "Content-Type": "application/json",
          "Accept-Language": "en",
          // Authorization: `Bearer ${useRuntimeConfig().apiSecret}`,
        },
      });
      console.log(result);
      return result;
    }

解决这个问题的办法是什么？我看到建议运行 Nuxt3.js 的线程。请有人帮助我。非常感谢

尝试使用平滑滚动的锚链接，就像 React npm 包“react-anchor-link-smooth-scroll”一样，虽然有一个 Vue3 等效项，但它不适用于 Nuxt3，那么使用平滑滚动的最佳方法是什么锚定链接？

我对网络开发还是新手，并尝试使用 Nuxt 和 Strapi 作为 CMS 来构建电子商务应用程序，以使网站所有者（在本例中也是我）能够轻松添加/编辑/删除产品。

我发现了很多关于这个主题的文章，但我感到非常困惑。我了解了JAMstack这个术语，我真的很喜欢它，但我认为我还没有完全理解它。

在 JAMstack 文章中解释了我的一个类似用例（使用 Strapi、nuxt、snipcart 进行电子商务）。我读到我必须在 SSG 中构建我的前端。在另一篇使用Nuxt 2的文章中，创建项目的屏幕截图显示选择了通用模式。

我的头快要融化了，真的不知道哪个选项是有效的，也不知道所有 SPA/SSG/SSR 是否都可以使用无头 cms 来实现，并提供一个 jamstack 应用程序，我应该使用哪一个。我应该首先使用 jamstack 吗？

我正在尝试在 Nuxt 3.0.0-rc.8 应用程序中加载 mapboxgl 样式表。通常，对于 Vue 项目，我手动将其添加到 index.html 页面的头部。

然而，这显然不是 Nuxt 3 中的做法。我尝试将其添加到 nuxt.config.ts 文件中的 head 和 css 选项中，但都没有成功。我确实注意到，当我将它添加到 css 数组时，它被添加到我的标题中，但“https://”被替换为“_nuxt”。

我知道我错过了一些简单的事情。这是我的配置文件：

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
  ],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
  buildModules: ['@pinia/nuxt'],
  runtimeConfig: {
    treesAPIKey: '',
    public: {
      baseURL: '',
      mapToken: '',
    },
  },
  head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] },
});

我是新手，这是我的第一个使用 nuxt 的 vuejs 项目。 \n我在 CMD 中通过“npm run dev”运行命令，在为我的项目运行命令“npm install”后得到：

* Client \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 building (10%) 1/2 modules 1 active\n node_modules\\webpack-hot-middleware\\client.js\n\n* Server \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88 building (10%) 1/1 modules 0 active\n\n\nnode:internal/crypto/hash:71\n  this[kHandle] = new _Hash(algorithm, xofLen);\n                  ^ttp://localhost:3000/   \xe2\x94\x82\n   \xe2\x94\x82                                       \xe2\x94\x82\nError: error:0308010C:digital envelope routines::unsupported\n    at new Hash (node:internal/crypto/hash:71:19)\n    at Object.createHash (node:crypto:133:10)                                        07:49:12\n    at module.exports (C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\lib\\util\\createHash.js:135:53)                                                              07:49:12\n    at NormalModule._initBuildHash (C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\lib\\NormalModule.js:417:16)\n    at handleParseError (C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\lib\\NormalModule.js:471:10)\n    at C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\lib\\NormalModule.js:503:5\n    at C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\lib\\NormalModule.js:358:12\n    at C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\node_modules\\loader-runner\\lib\\LoaderRunner.js:373:3\n    at iterateNormalLoaders (C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\node_modules\\loader-runner\\lib\\LoaderRunner.js:214:10)\n    at Array.<anonymous> (C:\\Users\\a\\revampkiriminaja\\kiriminaja\\node_modules\\webpack\\node_modules\\loader-runner\\lib\\LoaderRunner.js:205:4) {\n  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],\n …

我正在尝试将 auth0 添加到我的 nuxt3 应用程序中，但我在如何处理它时遇到了困难。auth-nuxt 模块仍然不适用于 nuxt3，并且 auth0-spa-js 无法使其与 SSR 一起使用，我遵循了本教程。

import createAuth0Client from "@auth0/auth0-spa-js";

let auth = await createAuth0Client({
  domain: "dev-......com",
  client_id: "Z0...................0T6I",
  redirect_uri: '<MY_CALLBACK_URL>'
});

export default auth;

import auth from "../store/authfile";
export default defineNuxtRouteMiddleware(async (to, from) => {
    let isAuthenticated = await auth.isAuthenticated();
    if (to.path === "/" && !to?.query?.code) {
        return;
    }
    if (!isAuthenticated) {
        const query = to?.query;
        if (query && query.code && query.state) {
            await auth.handleRedirectCallback();
        } else {
            await auth.loginWithRedirect();
        }
    } …

我想使用图标库，因为它可能对其他事情有好处，所以我决定只使用 Vuetify，因为它除了包含图标的能力之外还包括其他设计优势。

在现有项目中使用 npm 安装 @mdi/js 和 Vuetify 后，我的 src/plugins/vuetify.ts 文件夹中有以下代码：

import "vuetify/styles";

import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi"

export default createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

现在要插入图标，建议使用@mdi/js，因为据我了解，只会导入实际使用的图标。

这就是我的 App.vue 的样子：

<script setup lang="ts">
import { mdiAccount } from '@mdi/js';
</script>

<template>
    <main>
        <v-icon :icon="mdiAccount" size="16" color="white" class="h-25 w-25"/>
    </main>
</template>

文档中给出的示例几乎都是这样，只是使用组合 api（除非我犯了错误）...你能发现我犯的错误吗？