未分類

VueCLIのConfiguration Referenceのvue.config.js日本語訳

URL:https://cli.vuejs.org/config/#global-cli-config

背景

VueCLIでTodoアプリのような簡単なプログラムを作れるようになった。

ただ、内部でどのような処理が行われているのか、イマイチ腑に落ちないことが多い。

そこで、VueCLIの理解を深めるために、Referenceにあたることにした。

訳文は今後追記あり。

日本語訳

Configuration Reference

# Global CLI Config

Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with your editor of choice to change the saved options.

You can also use the vue config command to inspect or modify the global CLI config.

# Target Browsers

See the Browser Compatibility section in guide.

# vue.config.js

vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it’s present in your project root (next to package.json). You can also use the vue field in package.json, but do note in that case you will be limited to JSON-compatible values only.

vue.config.jsは、プロジェクトルート(package.jsonの隣)に存在する場合、@ vue / cli-serviceによって自動的にロードされるオプションの構成ファイルです。 package.jsonのvueフィールドを使用することもできますが、その場合はJSON互換の値のみに制限されることに注意してください。

The file should export an object containing options:

// vue.config.js
module.exports = {
  // options...
}

# baseUrl

Deprecated since Vue CLI 3.3, please use publicPath instead.

# publicPath

  • Type: string
  • Default: '/'The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). This is the equivalent of webpack’s output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.
  • アプリケーションバンドルがデプロイされるベースURL(Vue CLI 3.3より前のbaseUrlとして知られています)。これはwebpackのoutput.publicPathと同等ですが、Vue CLIは他の目的にもこの値を必要とするため、webpack output.publicPathを変更するのではなく、常にpublicPathを使用する必要があります。

    By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.

  • デフォルトでは、Vue CLIはアプリがドメインのルートにデプロイされることを想定しています。 https://www.my-app.com/。アプリがサブパスにデプロイされている場合、このオプションを使用してそのサブパスを指定する必要があります。たとえば、アプリがhttps://www.foobar.com/my-app/にデプロイされている場合、publicPathを「/ my-app /」に設定します。

    The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.

  • 値を空の文字列( ”)または相対パス(./)に設定して、すべてのアセットが相対パスを使用してリンクされるようにすることもできます。これにより、ビルドされたバンドルを任意のパブリックパスの下にデプロイしたり、Cordovaハイブリッドアプリのようなファイルシステムベースの環境で使用したりできます。

    Limitations of relative publicPath

    Relative publicPath has some limitations and should be avoided when:

    相対publicPathにはいくつかの制限があり、次の場合は避ける必要があります。

    • You are using HTML5 history.pushState routing;
    • You are using the pages option to build a multi-paged app.
    • ページオプションを使用して、マルチページアプリを構築しています。

    This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value:

  • この値は、開発中にも尊重されます。代わりに開発サーバーをルートで提供する場合は、条件値を使用できます。
    module.exports = {
      publicPath: process.env.NODE_ENV === 'production'
        ? '/production-sub-path/'
        : '/'
    }
    

# outputDir

  • Type: string
  • Default: 'dist'The directory where the production build files will be generated in when running vue-cli-service build. Note the target directory will be removed before building (this behavior can be disabled by passing --no-clean when building).

    TIP

    Always use outputDir instead of modifying webpack output.path.

# assetsDir

  • Type: string
  • Default: ''A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.

    TIP

    assetsDir is ignored when overwriting the filename or chunkFilename from the generated assets.

# indexPath

  • Type: string
  • Default: 'index.html'Specify the output path for the generated index.html (relative to outputDir). Can also be an absolute path.

# filenameHashing

  • Type: boolean
  • Default: trueBy default, generated static assets contains hashes in their filenames for better caching control. However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML generated by Vue CLI, you can disable filename hashing by setting this option to false.

# pages

  • Type: Object
  • Default: undefinedBuild the app in multi-page mode. Each “page” should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either:
  • マルチページモードでアプリをビルドします。各「ページ」には、対応するJavaScriptエントリファイルが必要です。値は、キーがエントリの名前であるオブジェクトである必要があり、値は次のいずれかです。
    • An object that specifies its entry, template, filename, title and chunks (all optional except entry). Any other properties added beside those will also be passed directly to html-webpack-plugin, allowing user to customize said plugin;
    • Or a string specifying its entry.
    module.exports = {
      pages: {
        index: {
          // entry for the page
          entry: 'src/index/main.js',
          // the source template
          template: 'public/index.html',
          // output as dist/index.html
          filename: 'index.html',
          // when using title option,
          // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'Index Page',
          // chunks to include on this page, by default includes
          // extracted common chunks and vendor chunks.
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        subpage: 'src/subpage/main.js'
      }
    }
    

    TIP

    When building in multi-page mode, the webpack config will contain different plugins (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin). Make sure to run vue inspect if you are trying to modify the options for those plugins.

# lintOnSave

  • Type: boolean | 'warning' | 'default' | 'error'
  • Default: trueWhether to perform lint-on-save during development using eslint-loader

. This value is respected only when @vue/cli-plugin-eslint

  • is installed.When set to true or 'warning', eslint-loader will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.

    To make lint errors show up in the browser overlay, you can use lintOnSave: 'default'. This will force eslint-loader to actually emit errors. this also means lint errors will now cause the compilation to fail.

    Setting it to 'errors' will force eslint-loader to emit warnings as errors as well, which means warnings will also show up in the overlay.

    Alternatively, you can configure the overlay to display both warnings and errors:

    // vue.config.js
    module.exports = {
      devServer: {
        overlay: {
          warnings: true,
          errors: true
        }
      }
    }
    

    When lintOnSave is a truthy value, eslint-loader will be applied in both development and production. If you want to disable eslint-loader during production build, you can use the following config:

    // vue.config.js
    module.exports = {
      lintOnSave: process.env.NODE_ENV !== 'production'
    }
    

# runtimeCompiler

  • Type: boolean
  • Default: falseWhether 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.
  • ランタイムコンパイラを含むVueコアのビルドを使用するかどうか。 trueに設定すると、Vueコンポーネントでテンプレートオプションを使用できますが、アプリ用に余分な10kbのペイロードが発生します。

    See also: Runtime + Compiler vs. Runtime only

  • .

# transpileDependencies

  • Type: Array<string | RegExp>
  • Default: []By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.

Jest config

This option is not respected by the cli-unit-jest plugin, because in jest, we don’t have to transpile code from /node_modules unless it uses non-standard features – Node >8.11 supports the latest ECMAScript features already.

However, jest sometimes has to transform content from node_modules if that code uses ES6 import/export syntax. In that case, use the transformIgnorePatterns option in jest.config.js.

See the plugin’s README

for more information.

# productionSourceMap

  • Type: boolean
  • Default: trueSetting this to false can speed up production builds if you don’t need source maps for production.

# crossorigin

  • Type: string
  • Default: undefinedConfigure the crossorigin attribute on <link rel="stylesheet"> and <script> tags in generated HTML.

    Note that this only affects tags injected by html-webpack-plugin – tags directly added in the source template (public/index.html) are not affected.

    See also: CORS settings attributes

# integrity

(SRI) on <link rel="stylesheet"> and <script> tags in generated HTML. If you are hosting your built files on a CDN, it is a good idea to enable this for additional security.

Note that this only affects tags injected by html-webpack-plugin – tags directly added in the source template (public/index.html) are not affected.

Also, when SRI is enabled, preload resource hints are disabled due to a bug in Chrome

  • which causes the resources to be downloaded twice.

# configureWebpack

  • Type: Object | FunctionIf the value is an Object, it will be merged into the final config using webpack-merge
  • 値がオブジェクトの場合、webpack-mergeを使用して最終構成にマージされます
  • .If the value is a function, it will receive the resolved config as the argument. The function can either mutate the config and return nothing, OR return a cloned or merged version of the config.
  • 値が関数の場合、解決された構成を引数として受け取ります。この関数は、構成を変更して何も返さないか、構成のクローンバージョンまたはマージバージョンを返すことができます。

    See also: Working with Webpack > Simple Configuration

# chainWebpack

  • Type: FunctionA function that will receive an instance of ChainableConfig powered by webpack-chain

# css.modules

Deprecated since v4, please use css.requireModuleExtension instead.

In v3 this means the opposite of css.requireModuleExtension.

# css.requireModuleExtension

  • Type: boolean
  • Default: trueBy default, only files that ends in *.module.[ext] are treated as CSS modules. Setting this to false will allow you to drop .module in the filenames and treat all *.(css|scss|sass|less|styl(us)?) files as CSS modules.

    TIP

    If you have customized CSS Modules configurations in css.loaderOptions.css, then the css.requireModuleExtension field must be explictly configured to true or false, otherwise we can’t be sure whether you want to apply these options to all CSS files or not.

    See also: Working with CSS > CSS Modules

# css.extract

  • Type: boolean | Object
  • Default: true in production, false in developmentWhether to extract CSS in your components into a standalone CSS files (instead of inlined in JavaScript and injected dynamically).

    This is always disabled when building as web components (styles are inlined and injected into shadowRoot).

    When building as a library, you can also set this to false to avoid your users having to import the CSS themselves.

    Extracting CSS is disabled by default in development mode since it is incompatible with CSS hot reloading. However, you can still enforce extraction in all cases by explicitly setting the value to true.

    Instead of a true, you can also pass an object of options for the mini-css-extract-plugin

  • if you want to further configure what this plugin does exactly.

# css.sourceMap

  • Type: boolean
  • Default: falseWhether to enable source maps for CSS. Setting this to true may affect build performance.

# css.loaderOptions

  • Type: Object
  • Default: {}Pass options to CSS-related loaders. For example:
    module.exports = {
      css: {
        loaderOptions: {
          css: {
            // options here will be passed to css-loader
          },
          postcss: {
            // options here will be passed to postcss-loader
          }
        }
      }
    }
    

    Supported loaders are:

postcss-loader sass-loader less-loader stylus-loader

  • It’s also possible to target scss syntax separately from sass, with the scss option.See also: Passing Options to Pre-Processor Loaders

    TIP

    This is preferred over manually tapping into specific loaders using chainWebpack, because these options need to be applied in multiple locations where the corresponding loader is used.

# devServer

  • are supported. Note that:
    • Some values like host, port and https may be overwritten by command line flags.
    • Some values like publicPath and historyApiFallback should not be modified as they need to be synchronized with publicPath for the dev server to function properly.
    • webpack-dev-serverのすべてのオプションがサポートされています。ホスト、ポート、httpsなどの一部の値は、コマンドラインフラグによって上書きされる場合があります。
    • publicPathやhistoryApiFallbackなどの一部の値は、devサーバーが正しく機能するためにpublicPathと同期する必要があるため、変更しないでください。

# devServer.proxy

  • Type: string | ObjectIf your frontend app and the backend API server are not running on the same host, you will need to proxy API requests to the API server during development. This is configurable via the devServer.proxy option in vue.config.js.
  • フロントエンドアプリとバックエンドAPIサーバーが同じホストで実行されていない場合、開発中にAPIサーバーにAPIリクエストをプロキシする必要があります。これは、vue.config.jsのdevServer.proxyオプションで構成できます。

    devServer.proxy can be a string pointing to the development API server:

    devServer.proxyは、開発APIサーバーを指す文字列にすることができます
    module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }
    

    This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.

  • これにより、不明な要求(静的ファイルに一致しない要求)をhttp:// localhost:4000にプロキシするようにdevサーバーに指示します。

    WARNING

    When devServer.proxy is set to a string, only XHR requests will be proxied. If you want to test an API URL, don’t open it in the browser, use an API tool like Postman instead.

    devServer.proxyが文字列に設定されている場合、XHRリクエストのみがプロキシされます。 API URLをテストする場合は、ブラウザーで開かずに、代わりにPostmanなどのAPIツールを使用してください。

    If you want to have more control over the proxy behavior, you can also use an object with path: options pairs. Consult http-proxy-middleware

  • プロキシの動作をより細かく制御したい場合は、path:オプションのペアでオブジェクトを使用することもできます。 http-proxy-middlewareを参照してください
  • for full options:
    module.exports = {
      devServer: {
        proxy: {
          '^/api': {
            target: '<url>',
            ws: true,
            changeOrigin: true
          },
          '^/foo': {
            target: '<other_url>'
          }
        }
      }
    }
    

# parallel

  • Type: boolean | number
  • Default: require('os').cpus().length > 1Whether to use thread-loader for Babel or TypeScript transpilation. This is enabled for production builds when the system has more than 1 CPU cores. Passing a number will define the amount of workers used.

# pwa

  • .

# pluginOptions

  • Type: ObjectThis is an object that doesn’t go through any schema validation, so it can be used to pass arbitrary options to 3rd party plugins. For example:
    module.exports = {
      pluginOptions: {
        foo: {
          // plugins can access these options as
          // `options.pluginOptions.foo`.
        }
      }
    }
    

# Babel

Babel can be configured via babel.config.js.

TIP

Vue CLI uses babel.config.js which is a new config format in Babel 7. Unlike .babelrc or the babel field in package.json, this config file does not use a file-location based resolution, and is applied consistently to any file under project root, including dependencies inside node_modules. It is recommended to always use babel.config.js instead of other formats in Vue CLI projects.

All Vue CLI apps use @vue/babel-preset-app, which includes babel-preset-env, JSX support and optimized configuration for minimal bundle size overhead. See its docs

for details and preset options.

Also see the Polyfills section in guide.

# ESLint

ESLint can be configured via .eslintrc or eslintConfig field in package.json.

See @vue/cli-plugin-eslint

for more details.

# TypeScript

TypeScript can be configured via tsconfig.json.

See @vue/cli-plugin-typescript

for more details.

# Unit Testing

# Jest

See @vue/cli-plugin-unit-jest

for more details.

# Mocha (via mocha-webpack)

See @vue/cli-plugin-unit-mocha

for more details.

# E2E Testing

# Cypress

See @vue/cli-plugin-e2e-cypress

for more details.

# Nightwatch

See @vue/cli-plugin-e2e-nightwatch

for more details.