Vue CLI vue.config .js configuration reference

Global CLI configuration

Some global configurations for @vue/cli, such as your usual package manager and your locally saved preset, are saved in the next JSON file in the home directory called .vuerc. You can use the editor to edit the file directly to change the saved options.

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

The target browser

Please refer to the Browser Compatibility section of the guide.

vue.config.js

The vue.config.js is an optional profile that is automatically loaded by @vue/cli-service if it exists in the root of the project (and package.json). You can also use the vue field in package.json, but note that this type of writing requires you to write in strict JSON format.

This file should export an object that contains options:

// vue.config.js
module.exports = {
  // 选项...
}

baseUrl

Deprecated from Vue CLI 3.3, use publicPath.

publicPath

• Type: string
• Default: '/'
• The basic URL at the time the app package was deployed. U sage is consistent with the output.publicPath of the webpack itself, but the Vue CLI needs this value in some other places, so always use publicPath instead of modifying the output.publicPath of the webpack directly. B y default, the Vue CLI assumes that your app is deployed on the root path of a domain name, such as https://www.my-app.com/. I f your app is deployed on a subpath, you need to specify this subpath with this option. F or example, if your app is deployed https://www.my-app.com/my-app/, set publicPath to /my-app/. T his value can also be set to an empty string ('') or a relative path ('./'), so that all resources are linked to a relative path, so that the package can be deployed on any path or used in a file system similar to a Cordova hybrid application. T here are some usage restrictions relative to publicPath's restrictions relative to the path's publicPath. Y ou should avoid using relative publicPath when using HTML5 history.pushState-based routing and when building multi-page apps using the pages option. T his value also takes effect in the development environment. I f you want to set up the development server on the root path, you can use a conditional value: module.exports . process.env.NODE_ENV . ' /production-sub-path/' : '/' }

outputDir

• Type: string
• Default: 'dist'
• The directory of the production environment build file generated when the vue-cli-service build is run. N ote that the target directory is cleared before it is built (the behavior can be turned off by passing in --no-clean at build time). Tip Always use outputDir instead of modifying the output.path of the webpack.

assetsDir

• Type: string
• Default: ''
• Places the resulting directory of static resources (js, css, img, fonts) (as opposed to outputDir). AssetsDir is ignored when prompted to override filename or chunkFilename from the generated resource.

indexPath

• Type: string
• Default: 'index.html'
• Specifies the output path .html the generated index, as opposed to outputDir. It can also be an absolute path.

filenameHashing

• Type: boolean
• Default: true
• By default, the resulting static resources include hash in their file names for better control of the cache. H owever, this also requires that the HTML for index is automatically generated by the Vue CLI. If you can't use index HTML generated by the Vue CLI, you can turn off the file name hash by setting this option to false.

pages

• Type: Object
• Default: undefined
• Build your app in multi-page mode. E ach "page" should have a corresponding JavaScript entry file. Its value should be an object, the object's key is the name of the entry, value is: an object that specifies entry, template, filename, title, and chunks (all but entry are optional), or a string that specifies its entry.

• module.exports = {
    pages: {
      index: {
        // page 的入口
        entry: 'src/index/main.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        // 当使用 title 选项时，
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: 'Index Page',
        // 在这个页面中包含的块，默认情况下会包含
        // 提取出来的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      // 当使用只有入口的字符串格式时，
      // 模板会被推导为 `public/subpage.html`
      // 并且如果找不到的话，就回退到 `public/index.html`。
      // 输出文件名会被推导为 `subpage.html`。
      subpage: 'src/subpage/main.js'
    }
  }

• Tip When built in multi-page mode, the webpack configuration contains different plug-ins (there are multiple instances of html-webpack-plugin and preload-webpack-plugin). If you try to modify the options for these plug-ins, make sure you run vue inspect.

lintOnSave

• Type: boolean | ' warning' | ' default' | 'error'
• Default: true
• Whether lint code is saved each time through eslint-loader in a development environment. T his value will take effect @vue after the installation of the @vue/cli-plugin-eslint. W hen set to true or 'warning', eslint-loader outputs the lint error as a compilation warning. B y default, warnings are only output to the command line and do not cause compilation to fail. I f you want lint errors to appear directly in your browser when you develop them, you can use lintOnSave: 'error'. T his forces the eslint-loader to output the lint error as a compilation error, which also means that the lint error will cause the compilation to fail. A lternatively, you can set the browser overlay to display both warnings and errors: "vue.config.js module.exports" . I f you want to disable eslint-loader when building in production, you can use the following configuration: http://vue.config.js module.export process.env.NODE_ENV s

runtimeCompiler

• Type: boolean
• Default: false
• Whether to use a Vue build that contains the runtime compiler. W hen set to true, you can use the template option in the Vue component, but this will add an extra 10kb to your app. More details can be found at: Runtime and Compiler vs. Runtime only.

transpileDependencies

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

productionSourceMap

• Type: boolean
• Default: true
• If you don't need a source map for your production environment, you can set it to false to speed up the build of your production environment.

crossorigin

• Type: string
• Default: undefined
• Set the crossorigin properties of the generated HTML, the "stylesheet" and the "stylesheet" and the labels. I t is important to note that this option only affects labels injected by html-webpack-plugin at build time - labels written directly in the template (public/index.html) are not affected. More details can be found at: CORS settings attributes

integrity

• Type: boolean
• Default: false
• Enable Subresource Integrity (SRI) on the generated HTML. E nabling this option provides additional security if the files you build are deployed on the CDN. I t is important to note that this option only affects labels injected by html-webpack-plugin at build time - labels written directly in the template (public/index.html) are not affected. In addition, when SRI is enabled, preload resource hints are disabled because a bug in Chrome causes files to be downloaded twice.

configureWebpack

• Type: Object | Function
• If the value is an object, it is merged into the final configuration via webpack-merge. I f the value is a function, the resolved configuration is received as an argument. T he function and the configuration that can be modified do not return anything, or they can return a cloned or merged version of the configuration. More details can be found: How to configure with webpack

chainWebpack

• Type: Function
• is a function that receives a webpack-chain-based ChainableConfig instance. A llows more granular modifications to the internal webpack configuration. More details can be found at: With webpack and chain operation

css.modules

Deprecated from v4, use css.requireModuleExtension. In v3, this option means the opposite of css.requireModuleExtension.

css.requireModuleExtension

• Type: boolean
• Default: true by default, only .module. T he file at the end of the ext is considered a CSS Module. W hen set to false, you can remove the .module from the file name and put all the . ( css|scss|sass|less|styl(us)?) T he file is treated as a CSS Modules module. T ip If you configure a custom CSS Module option in css.loaderOptions.css, css.requireModuleExtension must be explicitly specified as true or false, otherwise we're not sure if you want to apply these custom configurations to all CSS files. More details can be found at: With CSS and CSS Modules

css.extract

• Type: boolean | Object
• Default: The production environment is true, and in the development environment is whether false extracts CSS from a component into a separate CSS file (rather than dynamically injecting inline code into JavaScript). I t is also always disabled when building Web Components components (styles are inline and injected into shadowRoot). W hen built as a library, you can also set it to false so that users don't import CSS themselves. E xtracting CSS is not turned on by default in development environment mode because it is not compatible with CSS thermal overloading. However, you can still explicitly set this value to true to force extraction in all cases.

css.sourceMap

• Type: boolean
• Default: false
• Whether source map is turned on for CSS. Setting to true may affect the performance of the build.

css.loaderOptions

• Type: Object
• Default: {}
• Pass options to CSS-related loader. F or example: module.exports s. Postcss: s// The options here are passed to the postcs-loader, and the supported loader is: css-loader postcs-loader sass-loader less-loader stylus-loader Plus, you can also use the scss option to configure the scss syntax separately (as different from the sass syntax). More details can be found: Passing options to preprocessor Loader Tips are more recommended than manually specifying loader using chainWebpack, as these options need to be applied in multiple places where the appropriate loader is used.

devServer

• Type: Object
• All webpack-dev-server options are supported. N ote: Some values like host, port, and https may be override by command line parameters. Some values like publicPath and historyApiFallback should not be modified because they need to be synchronized with the publicPath of the development server to ensure normal operation.

devServer.proxy

• Type: string | Object
• If your front-end app and back-end API server are not running on the same host, you need to proxy API requests to the API server in a development environment. T his problem can be configured .js devServer.proxy option in vue.config. d evServer.proxy can be a string pointing to the development environment API server http://localhost:4000: module.exports .http://localhost:4000 . I f you want more proxy control behavior, you can also use a path:options pair of objects. T he full option is available at http-proxy-middleware. m odule.exports = { devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } } }

parallel

• Type: boolean
• Default: require ('os').cpus().length and 1 whether Babel or TypeScript uses thread-loader. This option is automatically enabled when the cpu of the system has more than one core and is only used for production builds.

pwa

• Type: Object
• Pass options to the PWA plug-in.

pluginOptions

• Type: Object
• This is an object that does not perform any schema validation, so it can be used to pass any third-party plug-in options. F or example: module.exports s pluginOptions: sfoo: s// plug-ins can access these options as 'options.pluginOptions.foo'. } } }

Babel

Babel can be configured through babel.config .js the data.

Tips

The Vue CLI uses the new configuration format babel.config in Babel 7 .js. D ifferent from the babel field in .babelrc or package.json, this profile does not use file location-based scenarios, but is applied consistently to all files below the root of the project, including dependencies within node_modules. We recommend replacing other formats with babel.config .js in Vue CLI projects.

All Vue CLI applications use the @vue/babel-preset-app, which includes babel-preset-env, JSX support, and configurations optimized to minimize package volume. More details and preset options are available in its documentation.

Also consult the Polyfill section of the guide.

ESLint

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

For more details, @vue/cli-plugin-eslint.

TypeScript

TypeScript can be configured by tsconfig.json.

For more details, @vue/cli-plugin-typescript.

Unit tests

Jest

For more details, @vue/cli-plugin-unit-jest.

Mocha (with mocha-webpack)

For more details, @vue/cli-plugin-unit-mocha.

E2E test

Cypress

For more details, @vue/cli-plugin-e2e-cypress.

Nightwatch

For more details, @vue/cli-plugin-e2e-nightwatch.