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 没有改变是因为上面引入的内部组件含有自己的 title
document.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 配置
ssr: false, // 是否启动 ssr
router: { // 只有在 spa 单页模式下 可以配置路由模式 默认后端渲染(SSR)为history模式
options: {
hashMode: true
}
}
alias 默认已配置，无需手动配置：
其他配置
- modules:配置Nuxt扩展的模块，比如：@pinia/nuxt@nuxt/image
- routeRules:定义路由规则，可更改路由的渲染模式或分配基于路由缓存策略
- builder:可指定用vite还是webpack来构建应用，默认是vite。如切换为webpack还需要安装额外的依赖。
runtimeConfig vs appConfig
