标签: nuxtjs3

我一直在尝试将VueUse Motion与 Nuxt3 一起使用。我已按照文档进行安装@vueuse/motio，然后添加'@vueuse/motion/nuxt'到我的nuxt.config.ts文件中。但是当我想运行开发服务器时，它会产生以下错误：

Cannot start nuxt: Package subpath './nuxt' is not defined by "exports" in C:\Users\orhan\Desktop\p3\node_modules\@vueuse\motion\package.json

这是我的模块nuxt.config.ts

  modules: [
    '@nuxtjs/i18n',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@pinia/nuxt',
    '@vueuse/motion/nuxt',
  ],

我的package.json文件：

  "devDependencies": {
    "@iconify/json": "^2.1.116",
    "@nuxt/types": "^2.15.8",
    "@nuxtjs/google-fonts": "^3.0.0-0",
    "@nuxtjs/tailwindcss": "^5.3.3",
    "@tailwindcss/typography": "^0.5.7",
    "@vueuse/motion": "^2.0.0-beta.12",
    "nuxt": "3.0.0-rc.11",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "unplugin-icons": "^0.14.11",
    "unplugin-vue-components": "^0.22.7"
  },
  "dependencies": {
    "@nuxtjs/i18n": "^8.0.0-alpha.2",
    "@pinia/nuxt": "^0.4.2",
    "@vueuse/nuxt": "^9.3.0",
    "daisyui": "^2.31.0"
  }

我刚刚升级到 Nuxt 3 的正式版本，并将我的服务器中间件更新为以下内容。但是，我尝试的任何操作都不会删除或覆盖默认的“x-powered-by”标头。我想把它改成别的东西。它总是说x-powered-by: Nuxt

export default defineEventHandler((event) => {
  event.node.res.removeHeader('x-powered-by') // Does not remove the header 
  event.node.res.setHeader('x-powered-by', 'Something Else') // Does not overwrite header
})

这曾经有效，但此方法已被弃用：

import type { IncomingMessage, ServerResponse } from 'http'

export default async (req: IncomingMessage, res: ServerResponse) => {
  res.setHeader('x-powered-by', 'Something Else')
}

/api/show.js

export default defineEventHandler(async (event) => {
  const cookie = getCookie(event, 'jwt')

  console.log("cookie: " + cookie);
  
  return { cookie: cookie }
})

当我在浏览器中访问时，http://localhost:3000/api/show我可以在屏幕上看到正确的值，并且可以看到从服务器记录到控制台的正确值。
但是当我尝试在我的应用程序中使用它时，如下所示：

<script setup>
const { data } = await useFetch('/api/show')
console.log(data.value.cookie);
</script>

然后两个控制台日志（服务器上的控制台日志和客户端上的控制台日志）都显示未定义。
这背后的逻辑是什么？
如何在 Nuxt3 中正确获取服务器上的 cookie 值？

我在 nuxt 3 项目中使用 Typescript，当我从组件导入 Typescript 模型时收到此错误。

The requested module '/_nuxt/models/component/blog/BlogPage.interface.ts' does not provide an export named 'default'

这是我的组件。组件渲染器.vue

<script setup lang="ts">
import BlogPage from "~~/models/component/blog/BlogPage.interface";
import HomePage from "~~/models/component/home/HomePage.interface";
import ProductPage from "~~/models/component/product/ProductPage.interface";

const props = defineProps<{
  page: HomePage | ProductPage | BlogPage;
}>();
console.log(typeof props.page);
</script>

这是进口型号。BlogPage.interface.ts

interface BlogPage {
  data: any;
}

export default BlogPage;

最后这是我的nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  alias: {
    'models': './models/*',
  },
  typescript: {
    strict: true,
  },
  css: ["~/assets/css/main.css"],
  modules: …

我正在尝试读取 nuxt 3 应用程序中文件夹 src/resources/data.txt 中的文件 data.txt。构建应用程序时，它会尝试在 .output/src/resources/data.txt 中读取它

nuxt 3 可以读取文件吗？我可以把 nuxt 文件放在哪里才能找到它？

这是我的功能：

    async function readData(fname: string):Promise<String | undefined>{
      const { __dirname } = useGlobalFileParams()
      try {
        const data = await fs.promises.readFile(path.resolve(__dirname,fname), 'utf-8')                           
         return data
      } catch (err) {
        console.log(err);
      }
   }

我在网上搜索了很多地方，但似乎无法在任何地方找到明确且直截了当的答案。给定父组件中的这个循环以输出子组件列表，我将一个对象作为道具发送到这样的子组件

<div v-for="review in reviews">
  <ReviewsReview v:bind={review} :key="venuceReview.id" />
</div>

每个都review Object将采用这种格式

{
 "_id": "58c03ac18060197ca0b52d51",
 "author":  3,
 "user":  2,
 "comment": "I tried this place last week and it was incredible! Amazing selection of local and imported brews and the food is to die for! ",
 "score": 5,
 "date": "2017-03-08T17:09:21.627Z"
}

我的问题是如何使用此处检索子组件中的道具defineProps()：

<script setup>
import ReviewStyles from "./review.module.css"

const props = defineProps()
</script>

提前致谢

我正在尝试设置为本地主机使用 HTTPS 运行 Nuxt 3。我查看了网上已经提出的其他指南和问题，但它们似乎都在使用旧版本的 Nuxt，并且出于某种原因，这种方式不再有效。例如，我尝试使用此链接作为如何设置nuxt.config.ts文件的参考，但是，它对我来说不起作用。

使用服务器属性时，我收到错误“NuxtConfig 类型中不存在服务器”，但是，devServer 似乎至少没有给我任何错误（仍然无法正常工作）。这是我的 nuxt.config.file

import { fileURLToPath } from "node:url"

export default defineNuxtConfig({
    css: ["~/assets/global.scss"],
    experimental: {
        reactivityTransform: true,
    },
    app: {
        head: {
            htmlAttrs: {
                lang: "en",
            },
        },
    },
    devServer: {
        https: {
            key: fileURLToPath(new URL("~/certs/localhost-key.pem", import.meta.url)),
            cert: fileURLToPath(new URL("~/certs/localhost.pem", import.meta.url)),
        },
    },
})

SSL 证书是使用 创建并自签名的mkcert。

生成 SSL 证书并安装所有内容并尝试访问 https://localhost:3000 后，出现错误“SSL_ERROR_RX_RECORD_TOO_LONG”。

如果有人能帮助我解决这个问题，我将非常感激。我以前从未这样做过，所以不太确定我在做什么，并且已经需要一段时间才能解决。

Nuxt 2 我们能够指定输出目录：

export default {
  target: 'static',

  generate: {
    dir: 'build/_site',
  },
}

现在我正在使用 Nuxt 3，无法弄清楚如何在运行生成时指定输出目录。生成支持被删除了吗？

这与我关于 Nuxt 3 API 安全性的其他问题有关。如何添加 CORS？目前，使用头盔模块对我来说不起作用。

这是我上一个问题 Nuxt 3 阻止其他网站、应用程序或域访问我的 API？

我已经vue3-google-map在一些 Vue 项目中使用过这个插件，但现在我正在开发一个 Nuxt 项目，我也想在这里使用它。有什么方法可以将其添加到 Nuxt 中吗？

这是文档：