在第 2 章VuePress入门中，我们介绍了 VuePress 的安装和设置。现在，您已经了解了如何安装 VuePress，它的系统要求是什么，以及如何进行设置，以便让 VuePress 为实际工作做好准备。
但是，安装 VuePress 只是第一步。为了使用它构建一个功能齐全的项目，并充分利用它，您需要学习如何使用 VuePress 做更多的工作。
本章将帮助您实现这一点
在本章中，您将了解以下内容：
- VuePress 开发基础知识
- VuePress 的基本配置值
- VuePress 的浏览器配置值
- 为 VuePress 生成管道配置值
- VuePress 中的资产处理
- 使用图像、公共文件和 URL
在本章中，您将学习 VuePress 中的资产处理、文件和 URL 处理等概念。现在，由于 VuePress 是一个静态站点生成器，所以与 WordPress 和其他数据库驱动的内容管理系统相比，情况往往略有不同。
话虽如此，考虑到第 4 章在 VuePress中创建一个站点的事实，我们实际上将使用 VuePress 建立一个实时演示站点，您必须充分了解 VuePress 中如何处理文件和 URL。第 4 章在 VuePress中创建一个网站，将帮助您为您的网站或博客规划完美的结构。
在进一步讨论之前，我们需要花一些时间确保了解 VuePress 通常支持的配置的性质。
首先，我们需要熟悉 VuePress 中使用的基本配置值。此列表不完整，您应该参考 VuePress 文档以获取完整的列表，该列表可能跨越多个页面。
为了清晰和避免混淆，我们将在讨论 VuePress 自定义主题的章节中讨论与主题相关的配置。类似地，我们将在有关 VuePress 中 Markdown 的章节中返回讨论与 Markdown 相关的配置值。
此值显示 VuePress 站点的标题。默认情况下，它作为前缀添加到站点上的所有页面，并显示在导航栏中，但您可以更改此功能：
Type: string
Default: undefined这显示了站点元描述。因此，在 HTML 页面中，它在<meta>标签中呈现：
Type: string
Default: undefined这包括当页面以 HTML 呈现时在<head>标签内呈现的附加数据。通常，它采用包含在[和]方括号内的内容的合并形式。
基本语法如下所示：
module
.exports = {
head: [
[ ... ]
]
}当然，head 配置是数组类型，它的一般默认形式是[ ]（空数组）。
此配置实体可帮助您将 VuePress 站点与 Google Analytics 集成。如果你已经意识到谷歌在网站分析领域的巨大潜力，那么你可能已经意识到了这一点。所以，您只需要将您的 Google Analytics ID 传递给这个配置值，就完成了。
ga是数组类型，默认值未定义，因为您需要将您的 Google Analytics ID 传递给它。
这个特殊的配置变量支持国际化和本地化；也就是说，与网站翻译成其他语言的兼容性。由于我们已经在 VuePress 中专门有一章介绍了国际化和本地化处理，我们将很快详细讨论这个配置值。
默认值未定义，接受的类型为字符串对象，格式如下所示：
{ [path: string]: Object }有时，某些文件倾向于附加预加载资源提示。shouldPrefetch函数处理此类限制和提示。
shouldPrefetch为函数类型，默认值为( ) => true格式。
困惑于我们在谈论什么限制和提示？那么，Vue.js 有一个叫做<link rel="preload">资源提示的东西。默认情况下，几乎所有要异步加载的资产都会预取，以加快页面加载时间和性能。但是，如果您使用的服务器较弱，资源有限，例如带宽有限，该怎么办？预取所有内容肯定会占用大量带宽。
在这种情况下，您可以使用shouldPrefetch功能来控制哪些文件附加了预回迁提示，哪些文件没有。使用此选择性选项，您可以避免在服务器上消耗大量带宽。
这个很有趣。在继续之前，您需要确保满足某些条件才能使用serviceWorker配置实体：
serviceWorker只能通过 HTTPS 注册，因此您需要确保您的网站使用 SSL 证书serviceWorker仅在生产模式下工作；也就是说，在实时站点上
现在，serviceWorker 是一种布尔类型，在默认情况下变为 false。但当您将其设置为 true 时，VuePress 将自动生成并注册一个服务工作者脚本。这可用于帮助缓存内容以供脱机使用。
What is a service worker?In JavaScript (JS), a service worker is a special type of script that is generated on the fly and run by the web browser in the background. Its running is conducted differently from the actual web page loading. The goal here is to perform some background functions that are very important, but do not need an actual web page or user configuration. Examples of cases where a service worker script is used nowadays are for push notifications in the browser, offline caching in the browser, background sync of data for easier recovery in case of connection failure, and so on.
在使用自定义主题时，serviceWorker配置值有时也会发出以下事件，您将在后面的章节中看到：
sw-readysw-cachedsw-updatedsw-offlinesw-error
这里的serviceWorker选项将只处理 JSserviceWorker脚本。这意味着它不会主动生成单页 web 应用程序；这取决于您是否根据需要使用serviceWorker脚本来满足项目的需要。
再一次，确保只有在激活 SSL 时才将serviceWorker设置为 true，因为serviceWorker脚本在非 HTTPS URL 上不起作用。
此配置变量指定 VuePress 中最终生成过程的输出目录。这里的默认路径是.vuepress/dist，但是您可以通过指定字符串类型的任何其他路径来更改它。
这意味着指定用于连接到开发服务器的端口值。除了 localhost 之外，您的 web 托管提供商应该能够更准确地告诉您希望在此处使用哪个端口。
默认值为8080，您只能使用整数类型的值，因为端口值仅指定为整数。
此术语指定可用于连接到服务器的主机地址。同样，您的 web 托管提供商或服务器管理器应该具有与此字段相关的准确详细信息。
它接受字符串类型的值，默认值仅设置为'0.0.0.0'。
VuePress 目前只有一个主要的浏览器兼容性相关的配置值，您应该知道。
此配置值为boolean类型，默认设置为 false。
但是，如果希望 VuePress 站点仅针对 evergreen web 浏览器，则可以将其设置为 true。当设置为 true 时，它将禁用对 ES5 Transfilation 和 polyfills 的支持。这意味着您的网站将无法与较旧版本的[T0]Internet Explorer[T1]（[T2]IE[T3]配合使用。
优势是什么？构建时间将大大缩短，工作速度也将加快。另外，你网站的最终构建规模会小得多。
What is an evergreen web browser?An evergreen web browser is one that is automatically updated to future versions as and when they are released. Thus, the user does not need to download a new version and install it from scratch. For example, if you have IE 8 running and you wish to install IE 9, you need to download the installable file and then run it. On the other hand, modern versions of browsers, such as Chrome or Firefox, can update themselves as and when new updates are released, without you having to run an installer all over again. This rolling model of web browser updates is referred to as an "evergreen web browser". Most of the newer web browsers are evergreen, whereas the older versions are not.
现在，让我们将注意力转向构建与管道相关的配置值。静态内容管理系统（如 VuePress 和 Jekyll）中的构建管道指的是生产线；也就是说，从开发到生产的代码流。
此时，您对 JS 和 CSS 的了解将派上用场。大多数与构建管道相关的配置值都围绕着 webpack。由于深入研究 JS 和 CSS 加载程序超出了本快速入门指南的范围，因此我们将仅参考相关项目的 GitHub 页面，以便您可以在需要时了解更多信息。
postcss可用于为网页包的 PostCSS 加载器指定自定义选项。有关加载器的详细信息可在此处找到：https://github.com/postcss/postcss-loader 。
指定postcss值后，将覆盖其中的任何其他 autoprefix 值。它只接受对象类型的值，默认语法如下：
{ plugins: [require('autoprefixer')] }scss为 SCSS 加载程序提供选项，该加载程序反过来用于将 SASS 转换为 CSS。您可以在了解有关此加载程序的更多信息 https://github.com/webpack-contrib/sass-loader 。
此配置实体接受对象类型的值，默认格式为{ }。
手写笔配置实体提供了调整webpack手写笔加载程序的选项。默认情况下，它接受对象类型的值，语法如下：
{ preferPathResolver: 'webpack' }您可以在了解更多关于触针加载器的信息 https://github.com/shama/stylus-loader 。
这个术语指定了 LESS 加载程序的选项，可用于将 LESS 编译为 CSS。详细指南见https://github.com/webpack-contrib/less-loader 。
接受对象类型的值，默认格式为{ }。
这为可以将 SASS 编译为 CSS 并加载*.sass文件的 SASS 加载程序提供了选项。有关此加载器的更多详细信息，请访问https://github.com/webpack-contrib/sass-loader 。
它接受对象类型的值，默认格式如下：
{ indentedSyntax: true }chainWebpack是一个默认值未定义的函数。
它可以帮助您利用 Mozilla 的 Webpack Chain API 修改内部webpack配置。这个特殊的 API 可以生成并简化 Web 包的定制和配置过程。您可以在 GitHub 的了解更多信息 https://github.com/mozilla-neutrino/webpack-chain 。
下面是一些示例代码，显示了在 VuePress 中与chainWebpack一起使用的语法：
module.exports = {
chainWebpack: (config, isServer) => {
// provide instance and config details here
}
}顾名思义，这个特定的配置实体允许您修改webpack的内部配置。因此，它主要是为那些已经熟悉webpack及其用法的人准备的。
它使用了webpack-merge，详情见https://github.com/survivejs/webpack-merge 。
通常，webpack-merge为您提供了一个合并函数，该函数可以简单地连接数组和合并对象。这将导致创建可以使用的新对象。
在 VuePress 中，configureWebpack的默认值为未定义。但是，您应该注意，它可以是对象类型，也可以是函数类型：
- 当该值为对象类型时，如前所述，通过使用
webpack-merge将该值合并到最终配置中。 - 当该值是函数类型时，它将接收与第一个参数相同的配置详细信息（第二个参数通常是一个
isServer标志）。此后，您可以选择修改作为参数直接传递的配置，或将其详细信息作为可合并的对象返回。
当使用configureWebpack作为函数类型时，语法如下：
module.exports = {
configureWebpack: (configArgs, isServer) => {
if (!isServer) {
// modify or work with the configArgs here
}
}
}好了，就这样！现在，您已经了解了 VuePress 中所有必需配置实体的基本细节。再次，我们省略了与主题配置相关的配置术语，以及 Markdown，我们将在后面的章节中讨论。
但是，现在您已经知道应该使用哪些术语，例如，当使用要用作站点 favicon 的图像资产时，您应该使用 head config 调用或引用它，等等。
现在是学习 VuePress 中 URL 和资产处理的一些理论的时候了。此后，您将准备开发第一个 VuePress 站点。
当我们说资产处理时，我们的意思是什么？
在开发领域，尤其是对于 web，资产是您的项目使用或使用的任何东西。这包括但不限于以下内容：
- 图像
- 视频
- 其他媒体文件
- 文档，例如 PDF
当然，为了处理这些数据文件和资产，CMS 需要实施专门的措施和协议。换句话说，您不能将 JPG 文件视为代码文件，因为内容管理系统无法完全读取 JPG 文件，但系统必须意识到它是图像类型的媒体资产，因此应将其视为代码文件。
在 VuePress 中，方法相当简单。首先，我们必须了解如何在 VuePress 中配置 URL。此后，我们可以将注意力转向可公开查看的文件，如图像和图形。
通常，您希望将 live VuePress 站点保留在以下两个位置之一：
- 在根 URL 上
- 在非根 URL 上
对于非根 URL，您需要在config.js中指定base选项-是的，与我们在第 2 章VuePress入门中讨论的config.js文件相同。它位于.vuepress目录中。
假设我们在mysite.example.com有一个项目，我们希望在名为vuep的目录中部署 VuePress。因此，我们的 VuePress 实例将在mysite.example.com/vuep/上运行。
在这种情况下，base值应设置为/vuep/。
Notice that base should begin and end with forward slash; that is, /.
现在，一旦您指定了base选项，它将自动添加到所有资产 URL 的前面。这意味着您在.vuepress/config.js文件中指定的任何资产 URL 都将在其前面加上base值。
现在，你只需要知道理论部分。这方面的现场使用将在第 4 章在 VuePress中创建一个站点中进行，我们将使用 VuePress 建立一个站点。
在 VuePress 中访问文件有多种方法。通过文件，重申一下，我们指的是媒体元素和其他资产。
您可以通过执行以下操作来执行此操作：
- 引用 Markdown 组件中的文件
- 引用主题组件中的文件
- 将文件寻址为公共文件
我们将在后续章节中介绍前两个步骤。
假设您有一个需要公开查看的图像文件。通过公开查看，我们的意思是它应该对您站点的所有访问者可见，而不仅仅是管理员，例如，站点 favicon。
您只需将上述图像文件放入.vuepress/public目录即可。此后，该文件将被保存到生成的目录的根目录中，并且可以公开访问。
然后，您可以参照或指定它，如以下示例所示：
mysite.example.com/vuep/favfile.png这里，favfile.png是您放置在/public/目录中的文件。
很简单，不是吗？
如果你想重新定位你的 VuePress 站点呢？比如说，改变/vuep位置？您可能必须更改以这种方式对 URL 的所有引用。
为了防止这种情况发生，VuePress 提供了一个相当简单的解决方案。
您可以使用$withBase助手（在 VuePress 中本机构建，无需扩展），它将自动生成正确的路径，您不必担心指定以后可能更改或不更改的绝对路径。
下面是一个如何使用它的示例：
<img :src="$withBase('/favfile.png')" alt="My Fancy Image File">此代码将确保引用坚持到指定的文件，而不管您使用 VuePress 的基本 URL 是什么。您可以使用它来处理公共文件，甚至可以在主题组件和 Markdown 文件中使用它。
在 VuePress 中，与现代 web 上的任何其他内容管理系统一样，最好通过相对 URL 引用所有资产元素。例如，./sample.jpg可以在任何文件模板中使用。在这种情况下，目标图像将首先通过 URL 加载器和文件加载器进行处理，然后复制到最终静态构建所需的位置。
当使用webpack模块（和配置实体，如本章前面关于构建管道配置的部分所述）时，可以使用~前缀。这几乎是许多 JS 框架的标准，如果您对这些 JS 框架有过任何类型的经验，您可能已经意识到了这一点。例如，~some-directory/sample.jpg是引用具有webpack别名的文件的好方法。
在本章前面，我们讨论了配置的configureWebpack选项。您可以在.vuepress/config.js文件中使用此选项轻松配置您的webpack别名。
这里有一个这样的例子：
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@alias': 'custom/path/to/directory/relative-url'
}
}
}
}在前面的示例中，您只是使用configureWebpack来确保所述别名引用您为项目中要使用的所需资产或元素指定的自定义路径。当与其他配置工具结合使用时，它可以帮助您轻松获取资产。
这就是 VuePress 中资产处理的全部功能。此时，您已经准备好进行实际的站点开发。
在本章中，您已经了解了 VuePress 中的大多数基本和高级配置实体。您知道基本术语，以及在何处调用什么值，以及哪个函数返回什么值。
显然，这将假定您熟悉基本的 JS 对象、函数和调用。
此外，您还了解 VuePress 中的资产处理基础知识、URL 的相对处理方式、媒体元素的引用方式等。
然而，在这个阶段，它可能看起来像是信息过载，这仅仅是因为您已经学习了大量的理论，但到目前为止尚未将其编译到生产或开发中。但与任何其他构建在现有语言之上并提供丰富可配置选项的框架的软件或产品一样，VuePress 也需要这样对待。
在第四章中，我们将在 VuePress中创建一个站点，我们将构建一个实时的 VuePress 网站。您可以使用您选择的任何代码编辑器或 IDE，以及任何平台。请注意，我们将在后面的章节中重点介绍部署，因此建议在下一章中设置本地站点。在上一章中，您已经学习了如何安装 VuePress。
因此，在完成第 4 章、在 VuePress中创建站点时，最好在需要时参考当前章节。这将帮助您了解哪些配置选项可以在何处使用，以及如何避免一些常见的陷阱。因此，当我们在下一章中在 VuePress 中构建站点时遇到给定的配置时，我们将实际了解它。
大部分重点将放在处理图像等媒体文件上，因为没有任何图像，您无法真正构建实际的实时站点！此外，我们还将介绍一些真实世界的概念，例如与 Google Analytics 等服务的集成（注意，我们已经在本章中学习了配置参考的语法；请参阅本章前面的基本配置部分下的ga。这将帮助您构建一个真正有效的 VuePress 站点，而不仅仅是一个花哨的示例。
因此，尽管如此，请确保您已经掌握并对本章所涵盖的术语有了相当好的了解。接下来，让我们继续构建 VuePress 站点！