Nuxt.js 是一款基于 Vue.js 的服务端渲染框架，使用起来非常方便。@nuxt/config 是一个由 Nuxt.js 官方提供的插件，可以帮助我们在项目中轻松配置各种选项。本文将介绍如何在 Nuxt.js 中使用 @nuxt/config。
安装
首先，我们需要在项目中安装 @nuxt/config：
npm install --save-dev @nuxt/config
安装完成后，我们就可以开始使用了。
基本用法
在 Nuxt.js 中使用 @nuxt/config 的方式非常简单。我们只需要在 nuxt.config.js 文件中引入插件，然后使用插件提供的 API 配置我们的项目即可。
举个例子，我们可以在 nuxt.config.js 文件中配置我们的页面标题：
-- -------------------- ---- -------
------ ------ ---- --------------
------ ------- -
-- ---
----- -
------ -------------
--
-- ---
-在上面的代码中，我们使用了 @nuxt/config 提供的 title 属性，将页面标题设置为配置中的 title 值。
配置选项
除了 title 外，@nuxt/config 还提供了很多其他的配置选项。下面是一些常用的选项及其用法。
env
env 属性可以用来设置环境变量。我们可以在 nuxt.config.js 文件中设置环境变量，然后在代码中使用 process.env 访问环境变量。
-- -------------------- ---- -------
------ ------- -
-- ---
---- -
-------- ----------------------------
--
-- ---
-在上面的代码中，我们设置了一个名为 API_URL 的环境变量，其值为 http://localhost:3000/api。我们可以在项目中的任意地方使用 process.env.API_URL 访问这个环境变量。
build
build 属性可以用来配置构建选项。我们可以设置一些构建相关的选项，如文件名、CSS 提取等。
-- -------------------- ---- -------
------ ------- -
-- ---
------ -
----------- -----
---------- -
---- -- ----- -- -- ----- - ----------- - --------------------------
------ -- ----- -- -- ----- - ----------- - --------------------------
---- -- ----- -- -- ----- - ------------ - ---------------------------
--
--
-- ---
-在上面的代码中，我们设置了 extractCSS 选项为 true，表示提取 CSS 文件。同时，我们还配置了各种文件的命名规则，如在开发环境下使用文件名为 [name].js，在生产环境下使用带哈希值的文件名。
modules
modules 属性可以用来加载 Nuxt.js 模块。我们可以通过安装 NPM 包来扩展 Nuxt.js 的功能，然后在 modules 属性中配置使用。
例如，我们可以安装 @nuxtjs/axios 模块来扩展 Nuxt.js 的 AJAX 功能：
npm install --save @nuxtjs/axios
然后，在 nuxt.config.js 文件中配置使用 @nuxtjs/axios 模块：
-- -------------------- ---- -------
------ ------- -
-- ---
-------- -
----------------
--
-- ---
-plugins
plugins 属性可以用来加载 Nuxt.js 插件。我们可以通过编写插件来操纵 Nuxt.js 的生命周期钩子、扩展 Vue.js、增强 Axios 等。
例如，我们可以编写一个插件来在每个页面的头部添加一些统计代码：
-- -------------------- ---- -------
------ ------- -- --- -- -- -
-------- - -------- -- --
--------------- - --------------- -- --
----------------------
---------- -
---- ---- ---
--
--
-然后，在 nuxt.config.js 文件中配置这个插件：
-- -------------------- ---- -------
------ ------- -
-- ---
-------- -
--------------------------
--
-- ---
-在上面的代码中，我们编写了一个名为 statistics.js 的插件，并使用 plugins 属性来加载这个插件。
总结
@nuxt/config 是一个非常实用的 NPM 包，可以让我们轻松配置 Nuxt.js 项目。本文介绍了一些常用的配置选项以及如何使用，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0aa48b403f2923b035c0b6