【Nuxt】配置
runtimeConfig 运行时配置
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: {enabled: true},runtimeConfig: {appKey: process.env.APP_KEY,public: {baseUrl: process.env.BASE_URL,}}
});.env ：
通过 process.env.xxx 来获取，项目运行会自动读取该文件。port 端口默认也是 3000 。
APP_KEY='your_app_key'
BASE_URL='https://api.yourwebsite.com'
PORT=3000
env 环境变量的优先级更高，如果使用
NUXT_开头的，其他 nuxt 配置中的环境变量会被替换：
这里的 appKey 变量值就会变为： ‘DDDDDD’。使用NUXT_PUBLIC_BASE_URL也是同理。
app.vue
<template><div><NuxtRouteAnnouncer /><NuxtWelcome /></div>
</template>
<script setup>
const runtimeConfig = useRuntimeConfig()
//判断代码运行的环境
if (process.client) {console.log('This code is running on the client')// console.log(runtimeConfig.appKey) // 该属性客户端不可以访问console.log(runtimeConfig.public.baseUrl)
}
if (process.server) {console.log('This code is running on the server')console.log(runtimeConfig.appKey)// public 内属性客户端和服务器都可以访问// public 外属性只有服务器都可以访问console.log(runtimeConfig.public.baseUrl)
}
appConfig 应用配置
方法一：在 nuxt.config.ts 中进行配置
// 应用的配置appConfig: {title: 'Nuxt 3 + TS + Vite + Pinia + Element Plus',theme: {primary: '#409EFF',}}
// 获取应用配置 任何环境都可以访问
const appConfig = useAppConfig();
// console.log(appConfig.title, appConfig.theme.primary)
onMounted(() => {// 会在该组件加载时改变title// 此时title 没有改变是因为上面引入的内部组件含有自己的 titledocument.title = appConfig.title
});
方法二：在 app.config.ts 文件中配置：
export default defineAppConfig({title: 'Nuxt 3 + TS + Vite + Pinia + Element Plus',theme: {primary: '#409EFF',}
})
实际项目中会将这两种方法合并，如果存在相同的，则 app.config.ts 文件的优先级更高。
app 配置
方法一：静态添加配置：
// app 配置app: {// 给所有页面head添加配置(SEO, 样式, 脚本)head: {title: 'Nuxt 3',charset: 'utf-8',viewport: "width=device-width, initial-scale=1",meta: [{ name: 'description', content: 'Nuxt 3 + TS + Vite + Pinia + Element Plus' },{ name: 'keywords', content: 'Nuxt 3, TS, Vite, Pinia, Element Plus' }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],style: [{ children: 'body { margin: 0; }' }],script: [// { src: '/js/index.js' }]}}
方法二：在 app.vue 文件内为所有页面动态添加配置，优先级大于在 nuxt.config.ts 中配置：
useHead({title: appConfig.title,meta: [{name: 'description', content: 'My amazing site.'}],link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}],style: [{children: 'body { background-color: #f0f0f0; }'}],script: [// {src: 'https://cdn.example.com/script.js'}],bodyAttrs: {class: 'my-body-class'},
})
而且上述的配置字符串也支持动态替换(ref)。
方法三：在 vue 文件中的 template 内写 nuxt的内置组件：
<Head><Meta name="description" content="My amazing site." /><title>app 首页</title></Head>
内置组件形式的 app 配置是三者里面最高的。
方法四：直接在 app.config.ts 中（defineAppConfig）配置。
可以使用 useAppConfig 获取。
- 与runtimeConfig不同，app.config.ts配置文件中的选项不能使用env环境变量来覆盖
- 不要将秘密或敏感信息放在app.config.ts文件中，该文件是客户端公开
router 配置
hashmode
ssr: false, // 是否启动 ssrrouter: { // 只有在 spa 单页模式下 可以配置路由模式 默认后端渲染(SSR)为history模式options: {hashMode: true}}
alias 默认已配置，无需手动配置：
其他配置
- modules:配置Nuxt扩展的模块，比如：@pinia/nuxt@nuxt/image
- routeRules:定义路由规则，可更改路由的渲染模式或分配基于路由缓存策略
- builder:可指定用vite还是webpack来构建应用，默认是vite。如切换为webpack还需要安装额外的依赖。
runtimeConfig vs appConfig
