Migration from v1

Config Options Change

  • The following options have been removed and should be implemented via plugins:

    • resolvers
    • transforms
    • indexHtmlTransforms
  • jsx and enableEsbuild have been removed; Use the new esbuild option instead.

  • CSS related options are now nested under css.

  • All build-specific options are now nested under build.

    • rollupInputOptions and rollupOutputOptions are replaced by build.rollupOptions.
    • esbuildTarget is now build.target.
    • emitManifest is now build.manifest.
    • The following build options have been removed since they can be achieved via plugin hooks or other options:
      • entry
      • rollupDedupe
      • emitAssets
      • emitIndex
      • shouldPreload
      • configureBuild
  • All server-specific options are now nested under server.

  • assetsInclude now expects string | RegExp | (string | RegExp)[] instead of a function.

  • All Vue specific options are removed; Pass options to the Vue plugin instead.

Alias Behavior Change

alias is now being passed to @rollup/plugin-alias and no longer require start/ending slashes. The behavior is now a direct replacement, so 1.0-style directory alias key should remove the ending slash:

  1. -alias:{'/@foo/': path.resolve(__dirname,'some-special-dir')}
  2. +alias:{'/@foo': path.resolve(__dirname,'some-special-dir')}

Alternatively, you can use the [{ find: RegExp, replacement: string }] option format for more precise control.

Vue Support

Vite 2.0 core is now framework agnostic. Vue support is now provided via @vitejs/plugin-vue. Simply install it and add it in the Vite config:

  1. import vue from'@vitejs/plugin-vue'
  2. exportdefault{
  3. plugins:[vue()]
  4. }

Custom Blocks Transforms

A custom plugin can be used to transform Vue custom blocks like the one below:

  1. // vite.config.js
  2. import vue from'@vitejs/plugin-vue'
  3. const vueI18nPlugin ={
  4. name:'vue-i18n',
  5. transform(code, id){
  6. if(!/vue&type=i18n/.test(id)){
  7. return
  8. }
  9. if(/\.ya?ml$/.test(id)){
  10. code = JSON.stringify(require('js-yaml').safeLoad(code.trim()))
  11. }
  12. return`export default Comp => {
  13. Comp.i18n = ${code}
  14. }`
  15. }
  16. }
  17. exportdefault{
  18. plugins:[vue(), vueI18nPlugin]
  19. }

React Support

React Fast Refresh support is now provided via @vitejs/plugin-react-refresh.

HMR API Change

import.meta.hot.acceptDeps() have been deprecated. import.meta.hot.accept() can now accept single or multiple deps.

Manifest Format Change

The build manifest now uses the following format:

  1. {
  2. "index.js":{
  3. "file":"assets/index.acaf2b48.js",
  4. "imports":[...]
  5. },
  6. "index.css":{
  7. "file":"assets/index.7b7dbd85.css"
  8. }
  9. "asset.png":{
  10. "file":"assets/asset.0ab0f9cd.png"
  11. }
  12. }

For entry JS chunks, it also lists its imported chunks which can be used to render preload directives.

For Plugin Authors

Vite 2 uses a completely redesigned plugin interface which extends Rollup plugins. Please read the new Plugin Development Guide.

Some general pointers on migrating a v1 plugin to v2:

Since most of the logic should be done via plugin hooks instead of middlewares, the need for middlewares is greatly reduced. The internal server app is now a good old connect instance instead of Koa.