Configuration

The following options can be used both on the command line and in the configuration file.

Vapper looks for the vapper.config.js file in the project root and loads the object exported by the file as a configuration option:

// vapper.config.js
module.exports = {
  // ...
}

mode

  • Type: string
  • Default: 'production'

Specify the startup mode of Vapper, production mode or development mode, the optional values are 'development' and 'production'.

vueCliMode Vue CLI only

  • Type: string
  • Default: null

Specify the --mode option of Vue CLI, which is mainly used to load .env.[Mode] files.

entry

  • Type: string
  • Default: 'src/main'

Specify the entry file of your project. By default, follow the convention of Vue CLI and use the src/main.js file as the entry file. If you use Poi then you need to change this option to: 'src/index.js'.

The entry option needs to be consistent with the entry option in the vue.config.js(or poi.config.js) configuration file.

ssr

  • Type: boolean
  • Default: true

Whether to enable SSR mode, the default is to enable, all pages will be rendered on the server. You can control whether a routing rule enables SSR by routing Meta.

enableCustomErrorPage

  • Type: boolean
  • Default: false

Whether to use a custom error page, which is turned off by default. That is, the SPA mode will be fall back whenever an error occurs. Read more: Error Handling - Custom Error Page.

template

  • Type: string
  • Default: ''

Customize the html template, for example:

// vapper.config.js
module.exports = {
  template: fs.readFileSync('/path/to/your/template', 'utf-8')
}

The default template is:

<!DOCTYPE html>
<html data-vue-meta-server-rendered lang="en" {{{ meta.inject().htmlAttrs.text() }}}>
  <head {{{ meta.inject().headAttrs.text() }}}>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
    {{{ meta.inject().meta.text() }}}
    {{{ meta.inject().title.text() }}}
    {{{ meta.inject().link.text() }}}
    {{{ meta.inject().style.text() }}}
    {{{ meta.inject().script.text() }}}
    {{{ meta.inject().noscript.text() }}}
  </head>
  <body {{{ meta.inject().bodyAttrs.text() }}}>
    <!--vue-ssr-outlet-->
    {{{ meta.inject().script.text({ body: true }) }}}
  </body>
</html>

templatePath 1.5.0+

  • Type: string
  • Default: ''

Like the template option, templatePath is used to customize the template of the renderer, but the template option is used to specify the content of the template, and the templatePath option specifies the path to the template. The advantage of using templatePath is that changes to the template file content will take effect in real time in development mode.

port

  • Type: number
  • Default: 4000

Server port number.

host

  • Type: string
  • Default: 0.0.0.0

Server host.

https 1.11.0+

  • Type: object
  • Default: {}

This object will be passed directly as options to require('https').createServer([options][,requestListener]) of nodejs.

An example:

// vapper.config.js
module.exports = {
  https: {
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt')
  }
}

logger

  • Type: function
  • Default: console.log

Custom log print function, the default is console.log, you can use it to customize the log print function, for example:

// vapper.config.js
module.exports = {
  // Custom logger
  logger (...args) {
    console.log(...args)
  }
}

logLevel

  • TYpe: number
  • Default: 5

Set the log level:

logLevel === 0 ----> silent
logLevel === 1 ----> error
logLevel === 2 ----> error/warn
logLevel === 3 ----> error/warn/debug
logLevel === 4 ----> error/warn/debug/tip
logLevel === 5 ----> error/warn/debug/tip/info

static

  • Type: object
  • Default:
{
  dotfiles: 'allow',
  index: false,
  maxAge: '1d'
}

Vapper internally uses serve-static to serve static resources. The options are the same as for serve-static.

plugins

  • Type: array
  • Default: []

To specify which plugins to load, see: Using Plugins.

htmlMinifier (Prod Only)

  • Type: boolean | object
  • Default: false

Vapper allows to minimize html content rendered by the server. This option is only available in production environments and is not minimize by default. You can set htmlMinifier to true so that Vapper will use the default configuration to minimize html content. You can also set the htmlMinifier option to an object and manually specify the appropriate minimize options. Vapper uses html-minifier to minimize the html string. If htmlMinifier is true, then the default minimize option is :

{
  collapseWhitespace: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true,
  minifyCSS: true
}

fallBackSpa

  • Type: boolean
  • Default: true

Whether to fall back the SPA mode when an error occurs, the default is true. Read Fall back to SPA mode for more details.

fallbackSpaHandler

  • Type: function
  • Default: null

Custom fallback SPA logic, please see: Custom Fallback Logic.

serverBundleFileName

  • Type: string
  • Default: 'vue-ssr-server-bundle.json'

Specifies the file name of the Server Bundle.

clientManifestFileName

  • Type: string
  • Default: 'vue-ssr-client-manifest.json'

Specifies the file name of the Client Manifest.

nodeExternalsWhitelist

  • Type: array
  • Default: [/\.css$/, /\?vue&type=style/]

The whitelist option for the webpack-node-externals plugin.

The merge strategy for the nodeExternalsWhitelist option is "append", for example:

// vapper.config.js
module.exports = {
  nodeExternalsWhitelist: [/some/]
}

The final whitelist options is: [/\.css$/, /\?vue&type=style/, /some/].

pageCache

  • Type: object
  • Default:
{
  cacheOptions = {
    max: 100,
    maxAge: 1000
  },
  cacheable = () => false,
  getCacheKey = req => req.url
}

Configure page level caching. For details, see: Page-level cache (micro-caching)

rendererOptions

  • Type: object
  • Default: {}

Set the options for vue-server-renderer.

runtimeCompiler

  • Type: boolean
  • Default: false

Whether to use the build of Vue core that includes the runtime compiler. Setting it to true will allow you to use the template option in Vue components, but will incur around an extra 10kb payload for your app.