构建物业

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

分析

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

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

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

nuxt.config.js.
出口默认的{建造{分析真正的/ /或分析{分析化'静止的'}}}

信息:您可以使用该命令Yarn Nuxt Build - Analyze纱线下一步构建-a构建应用程序并在上面启动bundle分析器http://localhost:8888.如果你没有使用您可以使用命令运行NPX.

corejs

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

  • 类型:数字|字符串(有效值是'汽车'23.
  • 默认:'汽车'

巴别塔

为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伊斯特弗提供的键与可用的键分开语境.他们是弃用。不要使用process.Client.process.server.就在这里不明确的在此刻。

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

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

装载机延伸

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

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

提取物

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

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

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

例子 (nuxt.config.js.):

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

注意:Vue 2.5.18之前存在一个错误,在使用此选项时删除了关键CSS导入。

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

不建议将所有内容提取到一个文件中。提取到多个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:

nuxt.config.js.
出口默认的{建造{文件名{{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-Build-指示器

加载器

自定义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.sassSass 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插件

  • 类型:数组
  • 默认:[]
nuxt.config.js.
进口网客'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.目的)。

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

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

  • 类型:数组(命令插件名称),细绳(订单预设名称),函数
  • 默认:cssnanoLast(把CSSNANO.在最后)
nuxt.config.js.
出口默认的{建造{postcss{//预设名称命令'cssnanolast'//有序插件名称命令['postcss-import'“postcss-preset-env”'cssnano']//函数来计算插件订单命令的名字预设=>预设cssnanoLast的名字}}}

Postcss插件& @nuxtjs/tailwindcss

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

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

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

轮廓

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

启用分析器WebpackBar

宣布

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

  • 类型:细绳
  • 默认:'/ _nuxt /'
nuxt.config.js.
出口默认的{建造{宣布'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.通常保留为服务器构建中的外部(更多信息)。

*警告:运行时依赖项(模块,nuxt.config(服务器中间件和静态目录)没有绑定。此特性仅禁止使用webpack-externalsserver-bundle。
信息:您可以使用该命令YARN NUXT BUILDSTANTANALONE要在命令行上启用此模式。(如果您没有使用您可以使用命令运行NPX..)

styleresources.

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

警告:此属性已不推荐使用。请使用style-resources-module相反,提高性能和更好的DX!

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

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

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

您不能在此处使用路径别名(@),您需要使用相对或绝对路径。

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

模板

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

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

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

陶工

  • 类型:目的布尔基
  • 默认:
nuxt.config.js.
{平行真正的缓存错误的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}):

nuxt.config.js.
{建造{转块[{islegacy.}=>islegacy.&&'ky']}}

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

vueLoader

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

  • 类型:目的

  • 默认:

    nuxt.config.js.
    {生产表!!选项开发TransformassEturls.{视频'src''src'目的'src'嵌入'src'}}

指定Vue Loader选项

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

  • 类型:数组<字符串>
nuxt.config.js.
出口默认的{建造{['〜/ .nuxt / support.js']}}

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

  • 类型:布尔基
nuxt.config.js.
出口默认的{建造{pollueSymlinks.真正的}}