nuxt3总结文档
一、配置文件
1、nuxt.config.js
import * as dotenv from 'dotenv'
import { NuxtPage } from 'nuxt/schema'
import { version } from './package.json'
const dotenvResult = dotenv.config({ path: './.env' })
if (dotenvResult.error) {
throw dotenvResult.error
}
export default defineNuxtConfig({
ssr: false,
// TODO
// serverHandlers: [],
typescript: {
includeWorkspace: true
// typeCheck: true
},
devtools: { enabled: false },
//npm包下载的依赖在此注入
modules: [
'@vant/nuxt',
'@nuxt/devtools',
'nuxt-icons',
],
// 使用环境变量构建后需要指定的私有或公共令牌。
//页面使用useRuntimeConfig()api可以直接获取
runtimeConfig: {
apiServerHost: process.env.NUXT_API_SERVER_HOST,
//客户端可用
public: {
requestAppid: process.env.NUXT_PUBLIC_REQUEST_APPID,
requestAppkey: process.env.NUXT_PUBLIC_REQUEST_APPKEY,
BUILD_ENV: process.env.NUXT_BUILD_ENV,
clientType: process.env.NUXT_PUBLIC_CLIENT_TYPE,
//
apiClientHost: process.env.NUXT_PUBLIC_API_CLIENT_HOST,
apiBase: process.env.NUXT_PUBLIC_API_BASE,
// ...envViteData,
version,
WX_APP_ID: process.env.NUXT_WX_APP_ID,
QQ_APP_ID: process.env.NUXT_QQ_APP_ID,
QQ_AUTH_URI: process.env.NUXT_QQ_AUTH_URI,
USER_KEY: process.env.VITE_USER_KEY,
},
},
//看nitro官网配置
nitro: {
//本地代理
devProxy: {
'/dev': {
target: 'xxxxx',
prependPath: true,
changeOrigin: true,
},
'/stage-api': {
target: 'xxxx',
prependPath: true,
changeOrigin: true,
},
},
},
imports: { dirs: ['./apis', './utils', './types'] },
hooks: {
// TODO 提取到 build/ 目录
'pages:extend' (pages) {
function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
const pagesToRemove = []
for (const page of pages) {
if (pattern.test(page.file!)) {
pagesToRemove.push(page)
} else {
removePagesMatching(pattern, page.children)
}
}
for (const page of pagesToRemove) {
pages.splice(pages.indexOf(page), 1)
}
}
removePagesMatching(/(components|hooks)/, pages)
},
},
css: [
'~/assets/css/main.css',
'@/assets/css/common.scss',
'swiper/swiper.min.css',
// '@kukejs/business-wap/vue3/style.css',
],
app: {
head: {
htmlAttrs: {
lang: 'zh-CN',
},
viewport:
'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no',
meta: [
{
name: 'renderer',
content: 'webkit',
},
],
// 设置script
script: [
{
src: '/libs/lottie_light.min.js',
},
{
src: process.env.NUXT_ICONFONT_CDN,
},
{
src: process.env.NUXT_WXLOGIN_CDN,
body: true,
},
],
},
},
telemetry: false,
extends: [
'../base', // 从本地继承
'@my-themes/awesome', // 从 npm 安装
'github:my-themes/awesome#v1', // 从 github 下载
]
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData:
'@use "@/assets/css/_colors.scss" as *;\n@use "@/assets/css/vant.scss" as *;\n',
},
},
},
// TODO 提取到 build/ 目录
esbuild: {
drop: ['LOCAL', 'LOCAL_STAGING', 'DEV', 'STAGING'].includes(process.env.NUXT_BUILD_ENV!)
? []
: ['console', 'debugger'],
pure: ['LOCAL', 'LOCAL_STAGING', 'DEV', 'STAGING'].includes(process.env.NUXT_BUILD_ENV!)
? []
: ['console.log', 'console.info'],
},
},
// workspaceDir: '',
postcss: {
plugins: {
'postcss-pxtorem': {
rootValue ({ file }: { file: string }) {
// if (file.includes('base/components')) {
// console.log('*************************', file)
// }
return /(vant)/.test(file) ? 50 : 100
},
propList: ['*'],
// exclude: /(node_modules)/,
// include: [],
// minPixelValue: 1,
selectorBlackList: ['body', 'html', '.rem-ignore'],
},
tailwindcss: {},
autoprefixer: {
overrideBrowserslist: ['last 5 version', '>1%'],
},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
},
},
webpack: {
extractCSS: true,
},
// srcDir: "src/",
experimental: {
componentIslands: false,
respectNoSSRHeader: false,
},
})
2、app.config.js
export default defineAppConfig({
defaultTitle: '',
defaultKeywords: '',
defaultDescription: '',
lesseeId: '',
theme: {
dark: false,
},
logo: {},
})
注意： 这个配置文件中的数据可以在页面用useAppConfig() 直接使用
二、api
- definePageMeta
definePageMeta({
layout: 'user',
alias: ['/function-page/:type.html'], //可以加html 打开页面加上html也可以打开，目前只知道这么用？
validate: (route) => {
return /^[a-zA-Z0-9]+$/.test(route.params.type as string)
},
})
三、项目文件目录
1、Composables 目录
Nuxt 3使用composables/目录使用auto-imports自动将Vue组合导入到应用中!，Nuxt只扫描 composables/ 目录的顶层文件，意思是在此目录下新建的ts文件写的方法可以在页面直接使用
注意： 模块化代码有一定的限制，比如在composables目录下新建一个test文件夹，在test目录下智能新建名为index的ts文件，用其他的名字在页面内无法引用方法并且会报错。
2、Components 目录
自动导入组件 我们把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件。比如：
| components/
--| TheHeader.vue
--| TheFooter.vue
layouts/default.vue:
<template>
<div>
<TheHeader />
<slot />
<TheFooter />
</div>
</template>
组件名称约定 没有嵌套的组件会以文件名直接导入，但如果存在嵌套关系哪？例如下面的路径：
| components/
--| base/
----| foo/
------| Button.vue
那么组件名称将会基于路径和文件名连起来，比如上面的base/foo/Button.vue注册名称将会是BaseFooButton，将来用起来会像下面这样：
<BaseFooButton />
四、中间件
Nuxt3 中间件类型可以分为以下两种：
- 服务端中间件：供服务器使用，每次请求都会运行。
- 客户端中间件： 仅在客户端运行，运行时并不改变页面内容，通常用于处理路由守卫等场景。
其中，服务端中间件位于 server/middleware 目录下，客户端中间件位于 middleware 目录下。服务端中间件只能在服务端生命周期期间使用，不能直接在页面内部使用。
1、匿名中间件
匿名中间件，直接在使用它们的页面中定义，这些中间件只会针对当前页面组件生效，对其他页面组件不会造成影响。
definePageMeta({
middleware(to, from) {
console.log('匿名中间件，只在当前页面使用');
}
})
2、具名中间件
具名中间件是指在 middleware 目录下存放的中间件文件以及其文件名即为其名称。下面是一个具名中间件的示例：
//middleware下新建test.ts
export default defineNuxtRouteMiddleware((to, from) => {
console.log('具名中间件' + to.path);
})
如果你需要将该中间件用作给定页面或页面组件的中间件，则可以通过在页面或组件的 middleware 属性中列出中间件名称来指定该中间件。例如：
//在页面中使用
definePageMeta({
middleware: ['test']
})
3、全局中间件
全局中间件，在 middleware 目录下创建 test.global.ts, 后缀为.global.ts则认定该组件为全局中间件，这样不需要在页面中指定中间件，每个页面访问都会自动使用到该中间件
