Vue Cli Babel

Posted on  by admin

babel plugin for vue-cli. Uses Babel 7 + babel-loader + @vue/babel-preset-app by default, but can be configured via babel.config.js to use any other Babel presets or plugins.

By default, babel-loader excludes files inside node_modules dependencies.
If you wish to explicitly transpile a dependency module, you will need to add it to the transpileDependencies option in vue.config.js:.
VersionPeer Dependency Versions
3.0.0
3.0.1
3.0.2
3.0.3
3.0.4
3.0.5
3.1.0
3.1.1
3.2.0
3.2.2
3.3.0
3.4.0
3.4.1
3.5.0
3.5.1
3.5.3
3.5.4
3.5.5
3.6.0
3.7.0
3.8.0
3.9.0
3.9.2
3.10.0
3.11.0
3.12.0
4.0.0
  • Cache options of babel-loader is enabled by default and cache is stored in /node_modules/.cache/babel-loader.
4.0.2
  • thread-loader is enabled by default when the machine has more than 1 CPU cores.
4.0.3
  • This can be turned off by setting parallel: false in vue.config.js.
4.0.4
  • parallel should be set to false when using Babel in combination with non-serializable loader options, such as regexes, dates and functions.
3.12.1
4.0.5
  • These options would not be passed correctly to babel-loader which may lead to unexpected errors.
4.1.0
  • 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.
4.1.1
  • You can edit this file directly with your editor of choice to change the saved options.
4.1.2
  • You can also use the vue config command to inspect or modify the global CLI config.
4.2.0
  • See the Browser Compatibility section in guide.
4.2.1
  • 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).
4.2.2
  • 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.
4.2.3
  • The file should export an object containing options:.
4.3.0
  • Or, you can use the defineConfig helper from @vue/cli-service, which could provide better intellisense support:.
4.3.1
  • Deprecated since Vue CLI 3.3, please use publicPath instead.
4.4.0
  • The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3).
4.4.1
  • 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.
4.4.2
  • By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g.
4.4.3
  • 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.
4.4.4
  • For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.
4.4.5
  • The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths.
4.4.6
  • 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.
4.5.0
  • Limitations of relative publicPath.
4.5.1
  • Relative publicPath has some limitations and should be avoided when:.
4.5.2
  • You are using HTML5 history.pushState routing;.
4.5.3
  • You are using the pages option to build a multi-paged app.
4.5.4
  • This value is also respected during development.
4.5.5
  • If you want your dev server to be served at root instead, you can use a conditional value:.
4.5.6
  • Default: 'dist'. The directory where the production build files will be generated in when running vue-cli-service build.
4.5.7
  • Note the target directory contents will be removed before building (this behavior can be disabled by passing --no-clean when building).
4.5.8
  • Always use outputDir instead of modifying webpack output.path.
4.5.9
  • A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
4.5.10
  • assetsDir is ignored when overwriting the filename or chunkFilename from the generated assets.
4.5.11
  • Default: 'index.html'. Specify the output path for the generated index.html (relative to outputDir).
4.5.12
  • Can also be an absolute path.
4.5.13
  • By default, generated static assets contains hashes in their filenames for better caching control.
4.5.14
  • However, this requires the index HTML to be auto-generated by Vue CLI.
4.5.15
  • If you cannot make use of the index HTML generated by Vue CLI, you can disable filename hashing by setting this option to false.
5.0.0
  • Default: undefined. Build the app in multi-page mode.
5.0.1
  • Each "page" should have a corresponding JavaScript entry file.
5.0.2
  • The value should be an object where the key is the name of the entry, and the value is either:.
5.0.3
  • An object that specifies its entry, template, filename, title and chunks (all optional except entry).
4.5.16
  • Any other properties added beside those will also be passed directly to html-webpack-plugin, allowing user to customize said plugin;.
5.0.4
  • Or a string specifying its entry. 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).
4.5.17
  • Make sure to run vue inspect if you are trying to modify the options for those plugins.