Vuecli Babel

Posted on  by admin

My project was created with Vue-Cli 3 and migrated to 4.


I tried with @vue/app and @vue/cli-plugin-babel/preset but IE is keeps throwing me:. Object doesn’t support property or method ‘assign’. And if I inject the Object Assign polyfill directly into the html, it’s failing in another one so clearly the polyfills written in the config file are not being included.

What am I doing wrong? I also tried with entry mode:. But then throws:. By the way, are the docs outdated? n v3, the default babel preset used in babel.config.js is @vue/app . In v4, we moved it to the plugin, so now it’s named as @vue/cli-plugin-babel/preset.

E2E Testing #

Modified2 years, 5 months ago. I am just starting out with Node.js and Vue.js, and I noticed that Vue.js has a Vue CLI tooling kit (whatever that means) which gives you a scaffolding project (don't need it I think?) but it also adds ESLint and Babel.

Babel #

The thing is, it adds them like this:. What is the difference between Vue's Babel @vue/cli-plugin-babel and installing Babel using NPM? Why do vue add cli-plugin-eslint instead of npm install eslint?

99 gold badges5151 silver badges120120 bronze badges. 120120 bronze badges. Most important difference is that Vue CLI (and it's plugins) doesn't just add tools to your project but also provide configuration for the tools added (webpack/babel/eslint etc.) with sensible defaults (while still allowing you to fine-tune it).


Injected webpack-chain Rules

  • config.rule('js')
  • config.rule('js').use('babel-loader')

TypeScript #

  • So you can spend more time developing your app instead of figuring out how to setup dev/prod build tool chain..
  • Tools like Babel and ESLint are configured to work with Vue but it doesn't mean they work only for Vue specific features (for example Vue single file components).

Target Browsers #

  • You can add pure JavaScript file into your project and Babel and ESLint will still work with it.
  • You can use some boilerplate or template for that but Vue CLI is better because it allows seamless updates to the tooling and configuration during whole project lifetime (instead of generating structure and config for you at the beginning and leave future updates to you).
  • For example lets say your project is using SASS in VUE single file components.
  • You need a sass-loader Webpack plugin for that.
  • Then sass-loader maintainers decide they need to change structure of their configuration (as happened recently).
  • If your project is based on the template of some kind, you can udpate to newer version of sass-loader but you'll also need to figure out what changes in configuration are needed to make it work again.
  • If you are using Vue CLI (and CLI team decides to update to newest version of sass-loader), you just update Vue CLI (or it's plugin) and you good to go (because someone on Vue CLI team figured out what needs to be changed and done it).
  • If you are just starting with Node/Vue, it's highly recommended to base your project on Vue CLI instead of trying to start from scratch..
  • 33 gold badges4343 silver badges6767 bronze badges.
  • 6767 bronze badges. 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.
  • See the Browser Compatibility section in guide.
  • 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.
  • The file should export an object containing options:.
  • Or, you can use the defineConfig helper from @vue/cli-service, which could provide better intellisense support:.
  • Deprecated since Vue CLI 3.3, please use publicPath instead.
  • 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.
  • By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g.
  • 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, set publicPath to '/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.
  • Limitations of relative publicPath.
  • Relative publicPath has some limitations and should be avoided when:.
  • 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:.
  • Default: 'dist'.
  • The directory where the production build files will be generated in when running vue-cli-service build.
  • Note the target directory contents will be removed before building (this behavior can be disabled by passing --no-clean when building).
  • Always use outputDir instead of modifying webpack output.path.
  • A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
  • assetsDir is ignored when overwriting the filename or chunkFilename from the generated assets.
  • Default: 'index.html'.
  • Specify the output path for the generated index.html (relative to outputDir).
  • Can also be an absolute path.
  • By 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.
  • Default: undefined.
  • Build 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:.
  • 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.
  • 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.
  • Type: boolean | 'warning' | 'default' | 'error'.
  • Default: 'default'.
  • Whether 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 'error' 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:.
  • 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:.
  • 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.
  • See also: Runtime + Compiler vs.
  • Type: boolean | Array.
  • By default babel-loader ignores all files inside node_modules.
  • You can enable this option to avoid unexpected untranspiled code from third-party dependencies.
  • Transpiling all the dependencies could slow down the build process, though.
  • If build performance is a concern, you can explicitly transpile only some of the dependencies by passing an array of package names or name patterns to this option.
  • 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.
  • Setting this to false can speed up production builds if you don't need source maps for production.
  • Default: undefined. Configure the crossorigin attribute on and