Nuxt4 开发实战

公司新业务：创建一个国外的独立站。为了使页面能更快的渲染及更好的SEO我们选用了SSR，由于团队较擅长vue生态遂选择了Nuxt4。由于是第一次使用SSR框架开发项目，记录下探索和学习的过程。

Nuxt4的框架目录结构在这里就不过多赘述了，参阅一些文档后得知v4的目录跟之前版本不一样都集成到app目录下了。

需要发布多个国家支持多语言，选用了@nuxtjs/i18n
UI库选用了@nuxt/ui
SEO使用了@nuxtjs/seo
自定义icon使用了@nuxt/icon

【还有一些其它引用如下：】（点击展开） ` modules: [ "@pinia/nuxt", "@nuxtjs/sitemap", "@nuxtjs/seo", "@vueuse/nuxt", "@nuxt/image", "@nuxt/ui", "@nuxtjs/i18n", "@nuxt/eslint", "@nuxt/scripts", "@nuxt/icon", ]`

一、关于国际化 在url使用/[国家编码]区分不同国家，nuxt.config.js的i18n配置如下

css 复制代码

i18n: {
    locales: [
      {
        code: "us",
        name: "English",
        file: "us.json",
      }
    ],
    pages: {
    },
    // defaultLocale: "ph", // 有需要默认语言的可以配置
    langDir: "locales", // 多语言文件的路径配置，在根目录下i18n/locales这样写即可
    vueI18n: "./i18n/i18n.config.js",
    strategy: "prefix", // 由于我们没有global站点，'/'根节点不允许访问，所以强制配置带前缀访问
    detectBrowserLanguage: false,
  },

二、关于页面渲染规则 纯静态页面配置预渲染，若有用户点击交互的页面还是需要配置csr，routeRules 配置如下：

json 复制代码

routeRules: {
    // 静态内容 - 构建时预渲染
    "/": { prerender: true },
    "/about": { prerender: true },
    ...
}

在这里可以配置单个页面，也可按规则配置多页面的渲染方式。说到routeRules，本地调试接口时其还可以配置接口转发，

go 复制代码

"/api/**": { cors: true }, // API 路由 CORS 支持
'/api/**': {
      proxy: `[转发接口地址]/api/**`
    },

三、关于SEO的robots、sitemap 如果在nuxt.config.js配置文件中未对robots和sitemap做配置，在打包过程中Nuxt会自动生成默认的.robots和sitemap.xml文件。我们为了更精准的构建这两个文件关闭了自动生成配置，在根目录public下放好两个文件，其中的内容后续会自动生成。

yaml 复制代码

  robots: {
    enabled: false
  },
  sitemap: {
    enabled: false,
  }

四、关于路由 Nuxt的路由是根据文件目录结构自动生成的，当然也可以在app文件加下创建router.options.js文件做自定义处理。相信大多情况使用自动生成即可。

通过在/app/pages目录下创建.vue文件生成对应的路由

静态路由

xml 复制代码

// app/pages/about.vue
<template> 
    <div>about</div>
</template>

动态路由，涉及强制传参跟不强制传参

arduino 复制代码

// app/pages/article/[id].vue  访问url /article/123 
// 单括号[]为强制参数，url不带id参数会报错
<setup>
    const route = useRoute()
    console.log('路由id参数', route.params.id)
</setup>
<template> 
    <div>article {{ route.params.id }}</div>
</template>

// app/pages/article/[[slug]].vue  访问url /article/abc
// 双括号[[]]为可选参数，url不带slug参数不会报错
<setup>
    const route = useRoute()
    console.log('路由id参数', route.params.slug)
</setup>
<template> 
    <div>article {{ route.params.slug }}</div>
</template>

五、关于api调用

服务端调用使用useRequest，客户端调用使用apiFetch，精准使用的目的是防止二次调用接口

以上，会逐步补充后续开发遇到的点

感谢你看到最后，最后再说两点~

①如果你持有其他的看法，欢迎你在文章下方进行指点（留言、评论）。

②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）