Nuxt3实战学习

前言

API基础

1、[NuxtLink]( - Nuxt 组件 - Nuxt 中文文档 v3)

① v-slot="{ isActive }" 可以获取当前是否为当前路由

:class="isActive || route.path.startsWith(item.startsPath ?? item.path)? 'text-primary' : ''"

② :to="{ name: 'news', params: { id: 123 } }" 或 :to="/news?id=${id}" 可以携带参数等

页面跳转建议使用nuxt-link,以便于seo的优化

2、 layouts设置

可以自定义模版，通过definePageMeta({ layout: 'xxx' }) 显示不同的页面

项目配置

1、nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2025-08-07',
    devtools: { enabled: false },
    app: {
        // 设置head
        head: {
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0',
            titleTemplate: '',
            meta: [
                {
                    name: 'keywords',
                    content:'',
                },
                {
                    name: 'description',
                    content:'',
                },
            ],
            link: [
                // 设置浏览器标签icon
                {
                    rel: 'icon',
                    type: 'image/png',
                    href: '/imgs/logo.png',
                },
            ],
            script: [
                // 引用一些外部链接
                {
                    src: 'https://tb.53kf.com/xxxx',
                    tagPosition: 'bodyClose',
                },
            ],
        },
    },
    // 开发环境
    $development: {
        runtimeConfig: {
            public: {
                baseURL: 'https://www.',
                serverURL: 'https://www.',
            },
        },
    },
    // 线上环境
    $production: {
        runtimeConfig: {
            public: {
                baseURL: 'https://www.',
                serverURL: 'http://www.',
            },
        },
    },
    css: ['~/assets/css/main.css', '~/assets/css/iconfont.css', '~/assets/css/iconColorFont.css'],
    modules: ['@nuxtjs/tailwindcss', 'arco-design-nuxt-module', 'nuxt-swiper', '@vueuse/nuxt'],
});

遇到的问题

1、Q：部署之后页面能正常访问，但刷新页面后，加载很慢，且获取不到数据，或者在app.vue中使用useAsyncData也获取不到数据

<script setup lang="ts">
await useAsyncData(async () => {
  await Promise.all([getUserInfo()]);
  return true;
});
</script>

报错示例

A: 服务端请求不通域名，可换成ip

    $production: {
		runtimeConfig: {
			public: {
				baseURL: 'https://www.xxx',
				serverURL: 'http://192.168.xx.xx:8002',
			},
		},
	},