# nuxt3.8-architecture

**Repository Path**: imallb/nuxt3.8-architecture

## Basic Information

- **Project Name**: nuxt3.8-architecture
- **Description**: 把项目拆出来一个框架，权当学习使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-11-26
- **Last Updated**: 2024-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Nuxt

## README

# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

## 注意

## sharp

本项目使用了nuxt-img作为图片处理，请在上线提交到linux系统前，在/.output/server文件目录下运行命令：

```bash
# output/.output/server
npm install --arch=x64 --platform=linux --libc=glibc sharp
```

把sharp构建的二进制文件修改为适合linux系统的文件，详情查看[sharp安装文档](https://sharp.pixelplumbing.com/install#cross-platform)。

在打包目录output/有一个自定义.bat脚本，点击就可以打包和更换sharp构建的linux二进制文件，节省更多步骤上的问题。

当然也可以自定义修改.bat脚本在windows上cmd的运行命令，契合实际项目。

## nitro

nuxt3中使用了nitro作为服务端处理接口路由缓存等代码和数据，其中提供了链接redis数据库存储数据缓存，在windows下创建[redis](https://github.com/tporadowski/redis/releases)服务可以在这个网站下下载。

## middleware服务端中间件和客户端中间件

server文件中的middleware中间件文件会作用于所有接口（代理的接口无效），其中包括：路由，api接口/routes文件中的非api接口，甚至本地图片也会调用处理。因此，中间件处理程序将在任何其他服务器路由之前在每个请求上运行，以添加或检查标头、记录请求或扩展事件的请求对象。

根目录文件中的middleware中间件文件，可以处理页面跳转，重定向等问题，创建的时候页面不调用会不起效果，如果想作用全局页面可以在文件名加上.global，也可以在页面上setup调用中间件函数单独调用该中间件。中间件代码会同时作用在服务端和客户端，可以使用判断条件处理你想要在服务端或客户端进行的代码：

```bash
# 服务端判断
if (process.server) {...}
# 客户端判断
if (process.client) {...}
```

具体用户可以查看[middleware](https://nuxt.com.cn/docs/guide/directory-structure/middleware)和[server](https://nuxt.com.cn/docs/guide/directory-structure/server)

## 语言

locale/存放文本翻译文件，可以是.json, .ts或者.js，比如：

```bash
# .json
{
    "hello": "你好",
    "world": "世界!"
}

# .ts/.js
export default {
    "hello": "你好",
    "world": "世界!"
}
```

引入翻译文件，可以在模块文件夹modules/找到I18nConfig.ts文件，在这个文件中配置了指向locale/路径，只需要把文件引入即可

```bash
{
    # 名称
    name: '简体中文',
    # 使用 SEO 功能时必需）- 用于 SEO 功能以及使用功能时匹配浏览器区域设置的语言范围。
    iso: 'zh-Hans',
    # 页面获取字段
    code: 'zh-cn',
    # 文件，可以使用数组引入多个
    file: 'zh-cn.json'
},
```

详细教程可以查看[nuxt/i18n](https://i18n.nuxtjs.org/options/routing)

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.