nuxt.js 相关问题

Nuxt.js是一个用于创建Vue.js应用程序的框架，您可以选择Universal，Static Generated或Single Page应用程序（受Next.js启发）

Nuxt.js robots.txt 文件每个用户代理多次禁止

使用 Nuxts nuxt-robots 模块如何配置多个不允许每个用户代理。目前我有：机器人：() => { 返回 { 用户代理： '*'，禁止：'/搜索/', 坐...

javascript vue.js nuxt.js robots.txt

回答 2 投票 0

使用 nuxt 3 访问本地私有变量？

我正在 nuxt 3 中创建一个项目，并且使用runtimeConfig。我做了一些研究，发现我可以创建公共变量（可在客户端访问）和私有变量，

vue.js nuxt.js nuxtjs3

回答 1 投票 0

Nuxt 3：如何停止服务器上运行的 JavaScript？

我有一个 vue/vite 网站，我正在将其迁移到 Nuxt 以改进结构和 SEO。大多数页面工作正常，但使用 jQuery 的页面返回 500 错误，jquery 未定义。我以为这必须...

nuxt.js nuxtjs3

回答 1 投票 0

如何在 nuxt 3 中同时拥有一些 SSG 路由和 SSR 路由？

我使用 nuxtgenerate 命令构建了我的项目，所以我想要一个 SSG 网站，但是对于我的一些路由（例如登录、注册），我不希望它们静态呈现，我想要拥有它们。 ..

nuxt.js nuxtjs3

回答 1 投票 0

Nuxt 3：以模态方式打开路线

这就是我想要实现的目标：页面/index.vue： A B 这就是我想要实现的目标： pages/index.vue： <nuxt-link to="/subpage/a">A</nuxt-link> <nuxt-link to="/subpage/b">B</nuxt-link> <nuxt-link to="/subpage/c">C</nuxt-link> 然后，当单击这些子页面链接之一时，我希望它在当前页面顶部打开一个模式，并将页面加载到组件 Modal.vue 中。组件/Modal.vue <div class="modal"> This is subpage {{ id }} </div> 我需要成为 nuxt-links，因为我需要能够直接深层链接到其中一个子页面。我该怎么办？我可以使用嵌套的 NuxtPage 吗？如有任何帮助，我们将不胜感激！在你的pages/index.vue中像这样的东西怎么样： <template> <div> <nuxt-link to="/subpage/a">A</nuxt-link> <nuxt-link to="/subpage/b">B</nuxt-link> <nuxt-link to="/subpage/c">C</nuxt-link> <Modal v-if="isModalOpen" @close="closeModal"> <router-view /> </Modal> </div> </template> <script> import Modal from '~/components/Modal.vue'; export default { components: { Modal, }, data() { return { isModalOpen: false, }; }, methods: { openModal() { this.isModalOpen = true; }, closeModal() { this.isModalOpen = false; }, }, }; </script>

nuxt.js nuxtjs3 nuxt3

回答 1 投票 0

SEF地址是如何使用Nuxt路由实现的？

我正在使用 Nuxt 3 和 Vue 制作一个网站。我需要有一个这样的页面： /文章/部分此页面应调用文件 /pages/articles.vue 并将值部分作为参数传递。我创造...

vue.js nuxt.js vuejs3 nuxtjs3

回答 1 投票 0

Nuxt 3 中的环境变量与 Pinia

我尝试使用 useRuntimeConfig() 在 DefineStore() 内的 Pinia 商店中渲染 env 变量，但商店无法使用该方法，抛出错误： “Nuxt 实例不可用”。我...

environment-variables nuxt.js nuxtjs3 pinia

回答 4 投票 0

Nuxt 插件未添加谷歌地图脚本标签

我的 Nuxt 插件遇到问题，特别是 googleMap.client.ts 插件。该插件的主要目的是在初始阶段为 Google Maps API 添加必要的脚本标签...

vue.js google-maps nuxt.js vuejs3

回答 1 投票 0

Nuxt 3 单个页面元数据未检测到

我使用 Nuxt 3 创建了我的在线作品集。我遵循了 Nuxt 3 指南，并观看了一些关于向各个 Nuxt 3 页面添加元数据的在线教程。我为每一页提供了

nuxt.js seo metadata nuxt3

回答 1 投票 0

如何将 props 传递到 <nuxt /> 组件页面

有人能够将 props 传递到 Nuxt.js 中的页面吗？典型的 Vue.js 属性可以这样传递：父组件.vue 有人能够将 props 传递到 Nuxt.js 中的页面吗？典型的 Vue.js 属性可以这样传递： parent-component.vue <template> <child-component :basket-count="items.length"/> </template> <script> import ChildComponent from './child-component' export default { data () { items: [{}, {}] }, components: { childComponent: ChildComponent } } </script> child-component.vue <template> <p>You have {{ basketCount }} items in your basket</p> </template> <script> export default { props: [ 'basket-count' ] } </script> 但是，当在布局 <nuxt /> 中使用 default.vue 标签时，道具不会按其应有的方式传递到子页面。讨论已经在这里进行，但票证似乎还没有结论。我还无法解决实现这一目标的可行方法。会回复，但很想知道 Nuxt.js 开发人员对此的想法？你必须在 JavaScript 部分使用驼峰命名法 <script> export default { props: [ 'basketCount' ] } </script> 要在页面组件之间传递数据，另一种方法是使用 Vuex Store https://nuxtjs.org/guide/vuex-store/ 使用 NuxtChild 或 router-view 只需使用 NuxtChild 而不是 Nuxt，您就可以直接将所有内容传递到加载的页面/组件。文档所以在布局中做这样的事情 <div id="app"> <Header /> <SocialMedia /> <main> <NuxtChild :myPropNameHere="prop data here" /> </main> <Aside /> </div> 或者像这样所以在布局中做这样的事情 <div id="app"> <Header /> <SocialMedia /> <main> <router-view :myPropNameHere="prop data here" /> </main> <Aside /> </div> 注意：我注意到在我的例子中，NuxtChild 和 Nuxt 的工作速度比 router-view 慢，但是使用 router-view 可能会导致一些 Nuxt 功能无法工作，所以由你来决定使用什么。使用带有 slots 的自定义 Vue 组件。这是我的 Default.vue 组件的示例： <template>  <div>  <Navbar /> <main>  <BackButton v-if="backLink" :backLink="backLink" />  <h1 v-if="title">{{ title }}</h1>  <div v-if="date" class="date"> Date added: <b>{{ dateDisplay }}</b> </div>  <slot></slot> </main> </div> </template> <script> export default { props: { title: { type: String, required: false, }, backLink: { type: String, required: false, }, date: { type: String, required: false, } } } </script> 然后在index.vue（或任何其他页面）中，我可以这样使用它： <template> <Default title="Index page"> This is my website's index page. I can put any HTML over here. </Default> </template> 您所要做的就是导入 Default.vue 作为 vue 组件。有点离题，但你可以使用nuxt/components。这样，您就不必在每个页面上导入并注册 Vue 组件。此方法的优点：道具可以传递这些可以在任何地方、任何页面中使用。这意味着它们可以链接（嵌套）。例如，您可以有一个 Root 父布局，以及 BlogPost 子布局，其中 BlogPost “继承”自 Root。你必须在child-component.vue中使用这个： <script> export default { props: { basketCount: { type: Number, default: 0 } } </script> 我也有同样的问题。根据下面的线程，不可能将 props 传递给元素： https://github.com/nuxt/nuxt.js/issues/1502 总的来说，如果你想在 Vue 中传递一些状态，你需要使用 props down/emit up 模式。如果您没有一种简单的方法将某些状态传递给直接父级，最简单的解决方案仍然是使用 Vuex（顺便说一句，它不是事件总线）。即使有一些奇怪的方法可以实现它，我也不建议您和您的团队在可读性和复杂性方面使用它。 Nuxt 2 它没有很好的记录或暗示，但是，它的工作方式与 Vue 中的完全相同，因为它是一个 Vue 框架;) 家长： <template> <div> <child-component :prop="{ message: `text`}" /> </div> </template> 孩子： <template> <div>{{ prop }}</div> </template> <script> export default { props: { prop: { default: () => {}, // must be a function type: Object, // String, Array, Object, Number etc. }, }, }; </script>

nuxt.js

回答 7 投票 0

错误：使用 npm run 命令运行 nuxt 项目时找不到模块“node:util”

我使用以下命令创建了一个新的 nuxt 2 项目 npm init nuxt-app 在 npm install 命令之后，当我尝试使用 npm run dev 运行它时，它会抛出以下错误（

javascript node.js nuxt.js node-modules package.json

回答 1 投票 0

Nuxt - 如何在没有父内容的情况下渲染子路由

我想知道如何在不显示父页面的情况下显示子页面的内容。我认为这很简单，但我没有发现如何做到这一点。我目前的输出已经...

javascript nuxt.js

回答 2 投票 0

nuxt 延迟加载插件与 vue 2.6.12

我构建了简单的 vue js 插件（vee-validate 上的包装器），并希望在组件水合和加载时包含它，但是面临 vue 的问题，不允许在应用程序之后注册组件