# nuxt3-demo

**Repository Path**: wslxm/nuxt3-demo

## Basic Information

- **Project Name**: nuxt3-demo
- **Description**: nuxt3 项目搭建功能演示 demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2024-09-10
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt 演示 demo

注意事项: 需要使用 node18+ 版本

## 完成内容

- 1、全局参数配置 nuxt.config.ts .runtimeConfig
- 2、element-plus 组件引入
- 3、接口请求演示 (首页)
- 4、搜索演示, 触发了搜索接口和响应展示
- 5、pages 页面，静态路由，动态路由，访问路由自定义 uri
- 6、全局路由守卫 middleware my.global.ts 全局守卫
- 7、crud 请求封装 composables -> crud.js
- 8、layouts 全局布局, 只写了一个 default.vue 布局，自定义可以自己加
- 9、错误处理，全局错误页 error.vue 1、自动触发, 2、主动触发，详见 uri.vue 代码
- 10、 处理使用二级目录部署时的问题
- 11、 修复首页访问 /index.html 时自动跳到 / 的问题

## 其他

状态管理 和 使用 Pinia 维护登录状态 (目前不需要登录, 未处理)

## 二级目录静态化配置

nuxt.config.ts 下配置

```json
    // 以下是静态化配置
    app: {
        // 部署后访问目录: 
        // 1、一级目录部署: / 
        // 2、二级目录部署: /activity/
        baseURL: '/',  
        // 部署后的静态资源目录, 
        // 1、跟路径    / 
        // 2、相等路径  ./
        // 3、绝对路径  域名/
        cdnURL: './'
    },
    // 禁用静态化后的 payload.json 文件
    experimental: {
        payloadExtraction: false,
    },
    // 静态化路由配置
    nitro: {
        prerender: {
            routes: ['/', "/from.html", "/fromSuccess.html", "/search.html",
                '/a1.html', '/a2.html', '/a3.html', '/a4.html', '/a5.html', '/a6.html', '/a7.html', '/a8.html', '/a9.html', '/a10.html']
            // routes: ['/a6.html', '/a7.html', '/a8.html', '/a9.html', '/a10.html']
        }
    }
```

首页配置

```json
/**
 * 将路由 / 设置为 /index.html
 */
if (import.meta.client && window.location.pathname === baseURL) {
    const searchParams = window.location.search;  // 获取查询参数 (如 ?id=123)
    const hashParams = window.location.hash;      // 获取哈希参数 (如 #section)
    // 替换路径并保留查询参数和哈希参数
    window.history.replaceState(null, '', `${baseURL}index.html${searchParams}${hashParams}`);
}
```

二级目录时, nginx 配置

```conf
 location /activity/ {
        alias  /usr/share/nginx/html/activity/;
        index  index.html index.htm;
 }
```