Nuxt 结合Strapi 建站

曾经用Nuxt3/Strapi 建了一个公司主页，但是将近一年没看，几乎忘完了。权且做些笔记，如果后面重构的话可以快速上手。

Nuxt的很多功能都是通过模块实现的，在集成/模块可以搜索需要的模块。

Nuxt4 项目文件结构 比上个版本精简来很多，也更有条理了。

国际化/i18n

@nuxtjs/i18n 通过json 配置多语言。在其官方仓库内有示例，同时该模块可以配合VSCode/i18n-ally插件使用。唯一需要注意的是，可能需要配置一下该插件的路径匹配规则。 可以修改插件的配置项，并且尽量自动检测浏览器语言小心设置prefex前缀，根目录没有内容直接自动跳转会影响SEO。

设备检测

可以通过设备检测插件获取设备信息，再结合Layout适配不同设备，毕竟靠CSS 实现响应式布局难度还是太高了。

Strapi 模块

@nuxtjs/strapi 基本按教程配置就行，但是开发环境下可能需要配置代理服务器：

export default defineNuxtConfig({
  // ...
  strapi: {
    // Options
    url: "https://www.xxxx.com",
    prefix: "/strapi",
    admin: "/admin",
    version: "v5",
    cookie: {},
    cookieName: "strapi_jwt",
  },
 
  // ...
  nitro: {
    devProxy: {
      "/uploads": {
        target: "http://127.0.0.1:1337/uploads",
        changeOrigin: true,
      },
    },
  },
  // ...
});

富文本

虽然Strapi 插件市场提供了一些富文本插件，但是要想白嫖又好用，可以使用@_sh/strapi-plugin-ckeditor。该插件是strapi 插件，注意不要安装到nuxt 环境中。使用时可能有一些css 样式不能正确显示，需要在nuxt 中微调：

figure.image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
  min-width: 50px;
}

figure.image img {
  max-width: 100%;  /* 图片宽度最多与父容器相等 */
  height: auto;     /* 按比例缩放 */
  display: block;   /* 避免默认的 inline 间隙 */
}

figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}

figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}

Nuxt 注意事项

Nuxt 新建项目中许多文件夹是不需要的，比较重要的是：

• pages 用于处理路由
• servers 用于处理特殊的前端请求，如数据交互等
• public 表示公共资源
• plugins 注册前端插件，用element-plus-icon 时用到了

其他的就还好。

配合pm2/Nginx/Let’s Encrypt，基本功能就搞定了。