nuxt相关

详细的使用请查看另一个 技术博客

配置

如何添加全局 CSS？

export default {css: ['~/assets/css/main.css']
}

如何配置环境变量

创建 .env 文件，然后通过 process.env 访问，或在 nuxt.config.js 中配置 env 属性。

路由与页面

路由：根据 pages 目录下的文件结构自动生成 Vue Router 配置，无需手动配置路由。

如何创建动态路由？

• 创建以下划线开头的文件或目录，如pages/users/_id.vue
• 创建的项目页面文件夹加一个 […slug] 文件夹

如何配置自定义路由？

在 nuxt.config.js 中使用 router.extendRoutes 或在 @/router.js 中配置。

数据获取

Nuxt.js 有哪些数据获取方法？

• asyncData：在组件初始化前获取数据，仅适用于页面组件
• fetch：可以在任何组件中使用，用于填充 store
• nuxtServerInit：在 store 中用于服务端初始化数据

asyncData 和 fetch 有什么区别？

• asyncData专为页面组件设计，在服务端渲染时调用，返回的数据会合并到组件 data 中
• fetch可用于任何组件，主要用于填充 store，不直接修改组件 data

如何在客户端获取数据？

使用常规的 Vue 方法如 mounted 钩子中调用 API，或使用 fetch 在客户端获取。

状态管理

Nuxt.js 如何集成 Vuex？

创建 store/index.js 文件即可自动启用 Vuex，Nuxt.js 会将其集成到应用中。

什么是 nuxtServerInit？

是 Vuex store 中的一个特殊 action，仅在服务端渲染时调用，用于初始化 store 数据。

如何在组件中访问 Vuex store？

与常规 Vue 应用相同，使用 this.$store 或 mapState/mapActions 等辅助函数。

如何持久化 Vuex 状态？

使用插件如 vuex-persistedstate 或nuxtServerInit配合 cookie/localStorage。

部署与优化

如何实现组件懒加载？

使用 () => import('~/components/MyComponent.vue') 语法或 Nuxt 的 <client-only> 组件。

如何处理 Nuxt 中的 SEO？

利用 Nuxt 的 head 方法动态设置 meta 标签，使用 JSON-LD 结构化数据，确保 SSR 正确渲染。

如何查看 Nuxt 应用的运行模式？

通过 process.client 和process.server判断当前运行环境。

常见问题

Nuxt 页面刷新后 Vuex 状态丢失怎么办？

使用 nuxtServerInit 配合 cookie 重新初始化状态，或使用持久化插件。

静态生成时动态路由如何预渲染？

在 nuxt.config.js 中配置 generate.routes 生成动态路由的静态文件。

如何解决 Nuxt 应用加载闪烁问题？

确保 SSR 和客户端渲染一致，使用 v -cloak 指令，合理设计数据加载策略。