Migration from v1
Config Options Change
-
The following options have been removed and should be implemented via plugins:
resolvers
transforms
indexHtmlTransforms
jsx
andenableEsbuild
have been removed; Use the newesbuild
option instead.CSS related options are now nested under
css
.-
All build-specific options are now nested under
build
.-
rollupInputOptions
androllupOutputOptions
are replaced bybuild.rollupOptions
. -
esbuildTarget
is nowbuild.target
. -
emitManifest
is nowbuild.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
.-
hostname
is nowserver.host
. -
httpsOptions
has been removed.server.https
can directly accept the options object. -
chokidarWatchOptions
is nowserver.watch
.
-
assetsInclude
now expectsstring | 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:
- alias: { '/@foo/': path.resolve(__dirname, 'some-special-dir') } + 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:
import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' export default defineConfig({ plugins: [vue()] })
Custom Blocks Transforms
A custom plugin can be used to transform Vue custom blocks like the one below:
// vite.config.js import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' const vueI18nPlugin = { name: 'vue-i18n', transform(code, id) { if (!/vue&type=i18n/.test(id)) { return } if (/\.ya?ml$/.test(id)) { code = JSON.stringify(require('js-yaml').load(code.trim())) } return `export default Comp => { Comp.i18n = ${code} }` } } export default defineConfig({ plugins: [vue(), vueI18nPlugin] })
React Support
React Fast Refresh support is now provided via @vitejs/plugin-react
.
HMR API Change
import.
have been deprecated. import.
can now accept single or multiple deps.
Manifest Format Change
The build manifest now uses the following format:
{ "index.js": { "file": "assets/index.acaf2b48.js", "imports": [...] }, "index.css": { "file": "assets/index.7b7dbd85.css" } "asset.png": { "file": "assets/asset.0ab0f9cd.png" } }
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:
-
resolvers
-> use theresolveId
hook -
transforms
-> use thetransform
hook -
indexHtmlTransforms
-> use thetransformIndexHtml
hook - Serving virtual files -> use
resolveId
+load
hooks - Adding
alias
,define
or other config options -> use theconfig
hook
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.
© 2019–present, Yuxi (Evan) You and Vite contributors
Licensed under the MIT License.
https://vitejs.dev/guide/migration