Nuxt 配置文件
Nuxt 的默认配置涵盖了大多数使用场景，可以使用 nuxt.config.js 覆盖这些配置。
nuxt.config.js
alias
此选项允许定义可在 JavaScript 和 CSS 中使用的别名。
import { resolve } from 'path'
export default {
alias: {
'style': resolve(__dirname, './assets/style')
}
}
build
此选项允许配置 build 步骤中的各种设置，包括 loaders、filenames、webpack 配置和 transpilation。
export default {
build: {
/*
** 可以在此处扩展 webpack 配置
*/
extend(config, ctx) {}
}
}
css
此选项允许指定全局（所有页面）使用的 CSS 文件/模块/库。
export default {
css: ['~/assets/css/main.css', '~/assets/css/animations.scss']
}
在 nuxt 配置文件中，css 属性数组中的 CSS、SCSS、Postcss、Less、Stylus 等文件的扩展名可以省略。
export default {
css: ['~/assets/css/main', '~/assets/css/animations']
}
省略扩展名后，例如从 css 文件改为 sass 文件，只要文件名相同，就无需更新 nuxt.config，新扩展名会自动使用。
dev
此选项允许定义 Nuxt 的 development 或 production 模式（以编程方式使用 Nuxt 时很重要）。
export default {
dev: process.env.NODE_ENV !== 'production'
}
env
此选项允许定义构建时（而非运行时）所需的环境变量，如 NODE_ENV=staging 或 VERSION=1.2.3。但对于运行时环境变量，需要使用 runtimeConfig。
export default {
env: {
baseURL: process.env.BASE_URL
}
}
runtimeConfig
运行时配置内置了 dotenv 支持，以提高安全性和更快的开发速度。运行时配置会添加到 Nuxt payload 中，因此在开发、服务端渲染或仅客户端应用程序中工作时，无需重新构建即可更新运行时配置（静态站点需要重新构建才能看到更改）。
.env 支持
如果项目根目录中有 .env 文件，会自动加载到 process.env 中，可以在 nuxt.config / serverMiddleware 或它们导入的其他文件中访问。
可以使用 --dotenv <file> 自定义路径，或使用 --dotenv false 完全禁用。例如，可以为生产、预发布和开发环境指定不同的 .env 文件。
publicRuntimeConfig
- 应保存所有公开的 env 变量，因为这些会暴露给前端。例如可以包含对公共 URL 的引用。
-
在服务端和客户端都可以使用
$config访问。
export default {
publicRuntimeConfig: {
baseURL: process.env.BASE_URL || 'https://v2.nuxt.com'
}
}
privateRuntimeConfig
- 应保存所有私有且不应暴露给前端的 env 变量。例如可以包含对 API 密钥的引用。
-
只能在服务端使用
$config访问（会覆盖 publicRuntimeConfig）。
export default {
privateRuntimeConfig: {
apiSecret: process.env.API_SECRET
}
}
使用配置值：
可以在页面、store、组件和插件的上下文中使用 this.$config 或 context.$config 从任何地方访问这些值。
<script>
asyncData ({ $config: { baseURL } }) {
const posts = await fetch(`${baseURL}/posts`)
.then(res => res.json())
}
</script>
在模板中，可以直接使用 $config.* 访问运行时配置：
<template>
<p>Our Url is: {{ $config.baseURL}}</p>
</template>
$config 时（例如在 fetch、asyncData 中或在模板中直接使用 $config），私有配置可能会暴露。generate
此选项允许为应用程序中所有动态路由设置参数，这些路由会被 Nuxt 转换为 HTML 文件。
export default {
generate: {
dir: 'gh_pages', // 使用 gh_pages/ 代替 dist/
subFolders: false // HTML 文件根据路由路径生成
}
}
head
export default {
head: {
title: 'my title',
meta: [
{ charset: 'utf-8' },
.....
]
}
}
此选项允许为应用程序定义所有默认 meta 标签。
loading
此选项允许自定义 Nuxt 的默认加载组件。
export default {
loading: {
color: '#fff'
}
}
modules
此选项允许向项目添加 Nuxt 模块。
export default {
modules: ['@nuxtjs/axios']
}
modulesDir
modulesDir 属性用于设置模块目录以进行路径解析，例如 webpack 的 resolveLoading、nodeExternals 和 postcss。配置路径相对于 options.rootDir（默认：process.cwd()）。
export default {
modulesDir: ['../../node_modules']
}
如果项目以 Yarn workspace 风格的 monorepo 组织，则可能需要此字段。
plugins
此选项允许指定在根 Vue.js 应用程序实例化之前运行的 JavaScript 插件。
export default {
plugins: ['~/plugins/url-helpers.js']
}
router
router 选项允许覆盖 Nuxt 的默认 Vue Router 配置。
export default {
router: {
linkExactActiveClass: 'text-primary'
}
}
server
此选项允许配置 Nuxt 应用程序服务器实例的连接变量。
import path from 'path'
import fs from 'fs'
export default {
server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
}
}
}
srcDir
此选项允许指定 Nuxt 应用程序的源目录。
export default {
srcDir: 'client/'
}
client 目录中 Nuxt 应用程序的项目结构示例：
**-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/**
dir
此选项允许为 Nuxt 目录指定自定义名称。
export default {
dir: {
pages: 'views' // Nuxt 会查找 views/ 文件夹而不是 pages/
}
}
pageTransition
此选项允许指定页面过渡的默认属性。
export default {
pageTransition: 'page'
}
其他配置文件
除了 nuxt.config.js，项目根目录中可能还有 .eslintrc 、prettier.config.json 或 .gitignore 等配置文件。这些用于配置 linter、代码格式化工具、git 仓库等其他工具，与 nuxt.config.js 分离。
.gitignore
在 .gitignore 文件中需要添加以下条目，以便版本控制忽略它们。node_modules 文件夹包含所有已安装的模块，nuxt 文件夹是运行 dev 或 build 命令时创建的文件夹，dist 文件夹是运行 generate 命令时创建的文件夹。
node_modules .nuxt dist