Nuxt.js允许您根据需要自定义用于构建Web应用程序的WebPack配置。

分析

Nuxt.js使用WebPack-Bundle-Analyzer让您可以想象您的捆绑包以及如何优化它们。

• 类型：布尔基或目的
• 默认：错误的

如果是一个对象，请参阅可用属性这里．

出口默认的{建造：{分析：真正的那/ /或分析：{分析化：'静止的'}}}

corejs

作为nuxt@2.14的当前版本core-js在您的项目中，您也可以指定要使用的版本。

• 类型：数字|字符串（有效值是'汽车'那2和3.）
• 默认：'汽车'

巴别塔

为JavaScript和Vue文件自定义Babel配置。.babelrc默认情况下忽略。

• 类型：目的

• 看babel-loader选项和巴别塔选项

• 默认：

  {Babelrc.：错误的那cachedirectory.：不明确的那预设：[“@nuxt / babel-preset-app”]}

默认目标@ nuxt / babel-preset-app是即：'9'在里面客户建立，和节点:‘当前’在里面服务器构建。

预设

• 类型：函数
• 争论：
  1. 目的: {isServer: true | false}
  2. 数组：
     • 预设名称@ nuxt / babel-preset-app
     • 选项的@ nuxt / babel-preset-app

笔记：配置的预设build.babel.presets将应用于客户端和服务器构建。目标将由NUXT设置（客户端/服务器）。如果要为客户端或服务器构建配置预设，请使用预设作为一个功能：

我们强烈推荐使用默认预设而不是以下自定义

出口默认的{建造：{巴别塔：{预设（{伊斯特弗}那[预设那选项]）{//直接更改选项选项．目标=伊斯特弗？．..：．..选项．corejs=．../ /返回什么}}}}

或覆盖默认值返回整个预设列表:

出口默认的{建造：{巴别塔：{预设（{伊斯特弗}那[预设那选项]）{返回[[预设那{目标：伊斯特弗？．..：．..那．..选项}]那[//其他预设]]}}}}

缓存

• 类型：布尔基
• 默认：错误的
• ⚠️实验

使缓存terser-webpack-plugin和缓存加载器

csssourcemap.

• 类型：布尔基
• 默认：真正的用于开发和错误的用于生产。

启用CSS源地图支持

devmiddleware

• 类型：目的

看WebPack-Dev-Middleware适用于可用选项。

devtools.

• 类型：布尔基
• 默认：错误的

配置是否允许Vue-devtools.检查。

如果你已经通过nuxt.config.js或其他方式激活了devtools，那么devtools启用与否无关。

延长

手动扩展客户端和服务器包的webpack配置。

• 类型：函数

扩展名称为两次，为服务器包进行一次，并为客户端捆绑进行一次。该方法的论据是：

1. WebPack Config对象，
2. 具有以下键的对象（所有Boolean除外加载器）：ISDev.那isClient那伊斯特弗那加载器．

出口默认的{建造：{延长（配置那{isClient}）{//仅为client-bundle扩展webpack配置如果（isClient）{配置．Devtool.=“源图”}}}}

如果您想了解有关我们默认的WebPack配置的更多信息，请查看我们的WebPack目录．

装载机延伸

加载器具有相同的物体结构build.loaders.，所以你可以改变内部加载器的选项延长．

出口默认的{建造：{延长（配置那{isClient那加载器：{vue}}）{//仅为client-bundle扩展webpack配置如果（isClient）{vue．TransformassEturls.．视频=['src'那“海报”]}}}}

提取物

启用通用CSS提取使用Vue服务器渲染器指导方针．

• 类型：布尔基或目的
• 默认：错误的

使用extract-css-chunks-webpack-plugin在幕后，所有的CSS都将被提取到单独的文件中，通常每个组件一个。这允许单独缓存你的CSS和JavaScript，值得一试，如果你有很多全局或共享的CSS。

例子 （nuxt.config.js.）：

出口默认的{建造：{提取物：真正的那/ /或提取物：{ignoreOrder：真正的}}}

您可能希望将所有CSS解压缩到一个文件中。这里有一个变通方法:

出口默认的{建造：{提取物：真正的那优化：{斯皮克斯：{Cachegroup.：{风格：{的名字：'款式'那测试：/\。（css|vue）$/那块：'全部'那执行：真正的}}}}}}

文件名

自定义捆绑文件名。

• 类型：目的

• 默认：

  {应用程序：（{ISDev.那ismodern.}）=>ISDev.？`(名字)$ {ismodern.？'。现代的'：''}. js`：`[ContentHash：7]$ {ismodern.？'。现代的'：''}. js`那块：（{ISDev.那ismodern.}）=>ISDev.？`(名字)$ {ismodern.？'。现代的'：''}. js`：`[ContentHash：7]$ {ismodern.？'。现代的'：''}. js`那css：（{ISDev.}）=>ISDev.？“[名字]. css”：'CSS / [ContentHash：7] .css'那IMG.：（{ISDev.}）=>ISDev.？'[路径] [名称]。[ext]'：“img /[名字]。[contenthash: 7]。[ext]”那字体：（{ISDev.}）=>ISDev.？'[路径] [名称]。[ext]'：'字体/ [名称]。[ContentHash：7]。[Ext]'那视频：（{ISDev.}）=>ISDev.？'[路径] [名称]。[ext]'：“视频/[名字]。[contenthash: 7]。[ext]”}

此示例将花哨的块名称更改为数字ID：

出口默认的{建造：{文件名：{块：（{ISDev.}）=>（ISDev.？'[姓名] .js'：'[ID]。[ContentHash] .js'）}}}

要了解更多关于使用表单的信息，请看看这一点webpack文档．

friendlyErrors

• 类型：布尔基
• 默认：真正的（启用覆盖）

启用或禁用由此提供的覆盖物FriendlyErrorsWebpackPlugin

Hardsource.

• 类型：布尔基
• 默认：错误的
• ⚠️实验

启用HardsourceWebpackplugin.为改善高速缓存

hotmiddleware.

• 类型：目的

看WebPack热中间件适用于可用选项。

html.minify.

• 类型：目的
• 默认：

{CollassebooleanAttributes.：真正的那欺诈性：真正的那minifyCSS：真正的那minifyjs.：真正的那ProcessConditionalComments.：真正的那删除atttributes.：真正的那RemoveredVolleDatributes.：真正的那修剪剪辑：真正的那useShortDoctype：真正的}

注意:如果你对html.minify.，他们不会与默认值合并！

配置为html-cinifier用于缩小构建过程中创建的HTML文件的插件（将适用于所有模式）。

指标

显示用于开发中的热模块的构建指示灯（可用v2.8.0 +）

• 类型：布尔基
• 默认：真正的

加载器

自定义nuxt.js集成的webpack加载器选项。

• 类型：目的
• 默认：

{文件：{}那fontUrl：{限制：1000}那Imgurl.：{限制：1000}那Pugplain.：{}那vue：{TransformassEturls.：{视频：'src'那源：'src'那目的：'src'那嵌入：'src'}}那css：{}那cssModules：{localidentName.：'[本地] _ [哈希：base64：5]'}那少：{}那Sass.：{indentedSyntax：真正的}那SCSS.：{}那手写笔：{}那vuestyle.：{}}

注意：除了指定配置nuxt.config.js.，它也可以修改build.extend.

loaders.file

更多细节在文件加载器选项．

加载程序。fontUrl和加载程序。Imgurl.

更多细节在URL-Loader选项．

Loaders.Pugplain.

更多细节在帕格 - 平原装载机或Pug编译器选项．

loaders.vue.

更多细节在vue-loader选项．

Loaders.css和loaders.cssmodules.

更多细节在css-loader选项．注意:cssmomodules是loader选项的使用CSS模块

loaders.less

您可以通过任何更少的特定选项更少的装载机通过loaders.less．看看更少的文档对于仪表箱中的所有可用选项。

Loaders.Sass和Loaders.scs.

看看SASS文档所有可用的Sass选项。注意:loaders.sass是Sass indented语法

Loaders.vuestyle.

更多细节在VUE-STYLE-LOADER选项．

优化

• 类型：目的

• 默认：

  {最小化：真正的那最小值：[// terser-webpack-plugin/ / optimize-css-assets-webpack-plugin]那斯皮克斯：{块：'全部'那automaticNameDelimiter：'。'那的名字：不明确的那Cachegroup.：{}}}

默认值splitChunks.name是真正的在开发或分析模式。

你可以设置最小值到自定义的插件数组或集合最小化来错误的禁用所有最小化程序。（最小化默认情况下被禁用开发）

看Webpack优化．

优化优化

• 类型：目的或布尔基
• 默认：
  • 错误的
  • {}当extractCSS被启用时

OptimizeCsSassets插件选项。

看NMFR / optimize-css-assets-webpack-plugin．

平行

• 类型：布尔基
• 默认：错误的
• ⚠️实验

启用thread-loaderwebpack建筑

插件

添加webpack插件

• 类型：数组
• 默认：[]

进口网客从'webpack'进口{版本}从'./package.json'出口默认的{建造：{插件：[新网客．defineplugin.（{'process.version'：版本}）]}}

postcss

定制PostCSS装载机插件。

• 类型：数组（遗留，将覆盖默认值），目的（受到推崇的），函数或布尔基

  注意:Nuxt.js已经应用Postcss预设env.．默认情况下，它启用第二阶段功能和autoprefixer.， 您可以使用build.postcss.preset.配置它。

• 默认：

  nuxt.config.js.

  {插件：{'postcss-import'：{}那'postcss-url'：{}那“postcss-preset-env”：这．预设那'cssnano'：{预设：'默认'}//在DEV模式下禁用}那命令：'presetenvandcssnanolast'那预设：{阶段：2}}

您的自定义插件设置将与默认插件合并（除非您使用数组而不是A.目的）。

出口默认的{建造：{postcss：{插件：{//禁用`postcss-url`'postcss-url'：错误的那//添加一些插件“postcss-nested”：{}那'postcss-enversion-type'：{}那“postcss-hexrgba”：{}}那预设：{autoprefixer：{网格：真正的}}}}}

如果postcss配置是目的那命令可以用来定义插件顺序:

• 类型：数组(命令插件名称),细绳（订单预设名称），函数
• 默认：cssnanoLast(把CSSNANO.在最后)

出口默认的{建造：{postcss：{//预设名称命令：'cssnanolast'那//有序插件名称命令：['postcss-import'那“postcss-preset-env”那'cssnano']//函数来计算插件订单命令：（的名字那预设）=>预设．cssnanoLast（的名字）}}}

Postcss插件& @nuxtjs/tailwindcss

如果你想在@nuxtjs/tailwindcss配置上应用postcss插件(例如postcss- pxtorm)，你必须先改变顺序并加载tailwindcss。

此设置对Nuxt-puregss没有影响。

进口{加入}从'小路'出口默认的{// ......建造：{postcss：{插件：{Tairwindcss.：加入（__dirname.那“tailwind.config.js”）那'postcss-pxtorem'：{propList：['*'那'！边界*']}}}}}

轮廓

• 类型：布尔基
• 默认:通过命令行参数启用- 轮廓

启用分析器WebpackBar

宣布

umxt.js让您将Dist文件上传到CDN以获得最大性能，只需设置“宣布到你的cdn。

• 类型：细绳
• 默认：'/ _nuxt /'

出口默认的{建造：{宣布：'https://cdn.www.lycasleep.com'}}

然后，在发布时Nuxt建设，上传内容.nu​​xt / dist / client目录到您的CDN和voilà!

在next 2.15+中，在运行时更改此属性的值将覆盖已经构建的应用程序的配置。

安静的

禁止大多数构建输出日志

• 类型：布尔基
• 默认值：启用时启用CI.或测试环境被检测到STD-ENV.

斯皮克斯

• 类型：目的

• 默认：

  nuxt.config.js.

  出口默认的{建造：{斯皮克斯：{布局：错误的那页面：真正的那comm：真正的}}}

如果是分割代码布局那页面和comm（常见libs：Vue | Vue-Loader | Vue-Router | Vuex ......）。

苏维埃社会主义共和国

为SSR渲染器创建特殊的webpack包。

• 类型：布尔基
• 默认：真正的对于通用模式和错误的适用于SPA模式

此选项基于自动设置模式价值如果没有提供。

独立

内联服务器包依赖项（高级）

• 类型：布尔基
• 默认：错误的

这种模式捆绑包node_modules.通常保留为服务器构建中的外部（更多信息）。

styleresources.

• 类型：目的
• 默认：{}

当您需要在页面中注入一些变量和MixIns时，这非常有用，而无需每次导入它们。

Nuxt.js使用https://github.com/yenshih/style-resources-loader.来实现这种行为。

您需要指定要包含给定预处理器的模式/路径：少那Sass.那SCSS.或手写笔

您不能在此处使用路径别名（〜和@），您需要使用相对或绝对路径。

{建造：{styleresources.：{SCSS.：'./assets/variables.scs'那少：”。/资产/ * .less那// sass：...，/ / scss:……选项：{/ /看到https://github.com/yenshih/style-resources-loader选项//除了“模式”属性}}}}

模板

umxt.js允许您提供自己的模板，该模板将根据Nuxt配置呈现。此功能特别适用于使用模块．

• 类型：数组

出口默认的{建造：{模板：[{src：'〜/ modules / support / plugin.js'那//`src`可以是绝对的或相对的dst：'support.js'那// dst是相对于project的。nuxt“dir选项：{//将选项提供给模板为“选项”密钥live_chat：错误的}}]}}

使用以下方式呈现模板lodash.template你可以学习更多如何使用它们这里．

陶工

• 类型：目的或布尔基
• 默认：

{平行：真正的那缓存：错误的那sourceMap：错误的那提取率：{文件名：'许可证'}那terserOptions：{输出：{评论：/^\ **！！|@保存|@license|@cc_on./}}}

Terser插件选项。调成错误的禁用此插件。

启用sourceMap会离开/ / # sourceMappingURL如果webpack在每个输出文件的末尾链接评论config.devtool设定为来源地图．

看webpack-contrib / terser-webpack-plugin．

转块

• 类型：数组
• 默认：[]

如果要使用Babel转换特定依赖关系，则可以添加它们build.transpile.．transpile中的每个项可以是包名、字符串或匹配依赖项文件名的regex对象。

从...开始v2.9.0，您还可以使用功能来有条件转换，函数将接收对象（{isDev, isServer, isClient, isModern, isLegacy}）：

{建造：{转块：[（{islegacy.}）=>islegacy.&&'ky']}}

在这个例子中，肯塔基州如果nuxt不在，将被babel转发现代模式．

vueLoader

注意:这个配置已经从next 2.0移除，请使用build.loaders.vue反而。

• 类型：目的

• 默认：

  nuxt.config.js.

  {生产表：！！这．选项．开发那TransformassEturls.：{视频：'src'那源：'src'那目的：'src'那嵌入：'src'}}

指定Vue Loader选项．

看

您可以在更改后提供自定义文件来观看和重新生成。此功能特别适用于使用模块．

• 类型：数组<字符串>

出口默认的{建造：{看：['〜/ .nuxt / support.js']}}

pollueSymlinks.

默认情况下，构建过程不会在Symlinks内扫描文件。例如，该布尔包括它们，从而允许使用诸如“页面”文件夹的文件夹内的符号链接。

• 类型：布尔基

出口默认的{建造：{pollueSymlinks.：真正的}}