查看“VuePress配置”的源代码

== 配置文件 ==

如果没有任何配置，你的 VuePress 站点仅有一些最基础的功能。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 <code>.vuepress</code> 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

<pre>├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
├─ .gitignore
└─ package.json</pre>
VuePress 站点的基本配置文件是 <code>.vuepress/config.js</code> ，但也同样支持 TypeScript 配置文件。你可以使用 <code>.vuepress/config.ts</code> 来得到更好的类型提示。

具体而言，我们对于配置文件的路径有着约定（按照优先顺序）：

* 当前工作目录 <code>cwd</code> 下：
** <code>vuepress.config.ts</code>
** <code>vuepress.config.js</code>
** <code>vuepress.config.mjs</code>
* 源文件目录 <code>sourceDir</code> 下：
** <code>.vuepress/config.ts</code>
** <code>.vuepress/config.js</code>
** <code>.vuepress/config.mjs</code>

你也可以通过 命令行接口 的 <code>--config</code> 选项来指定配置文件：

<pre lang="sh">vuepress dev docs --config my-config.js</pre>
一个基础的配置文件是这样的：

<pre lang="ts">import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  lang: 'zh-CN',
  title: '你好， VuePress ！',
  description: '这是我的第一个 VuePress 站点',
})</pre>


== 客户端配置文件 ==

在大多数情况下，配置文件已经足够帮助你配置好你的 VuePress 站点。不过，有些时候用户们可能希望直接添加一些客户端代码。 VuePress 通过客户端配置文件来支持这种需求：

<pre>├─ docs
│  ├─ .vuepress
│  │  ├─ client.js   &lt;--- 客户端配置文件
│  │  └─ config.js   &lt;--- 配置文件
│  └─ README.md
├─ .gitignore
└─ package.json</pre>
同样的，我们也有关于客户端配置文件的路径约定（按照优先顺序）：

* 当前工作目录 <code>cwd</code> 下：
** <code>vuepress.client.ts</code>
** <code>vuepress.client.js</code>
** <code>vuepress.client.mjs</code>
* 源文件目录 <code>sourceDir</code> 下：
** <code>.vuepress/client.ts</code>
** <code>.vuepress/client.js</code>
** <code>.vuepress/client.mjs</code>

一个基础的客户端配置文件是这样的：

<pre lang="ts">import { defineClientConfig } from '@vuepress/client'

export default defineClientConfig({
  enhance({ app, router, siteData }) {},
  setup() {},
  rootComponents: [],
})</pre>
<div class="tip">

和配置文件不同，客户端配置文件不能通过命令行接口的选项来指定。


</div>