Vite

Vite

Refs

  1. Vite - Getting Started
  2. Why Vite?
  3. Configuring Vite
  4. Modes
  5. Dependency Pre-Bundling

What is vite ?

  • Vite is a modern web project build tool, consists of two major parts:
  • A dev server that provides rich feature enhancements over native ES modules, for example super fast HMR.
  • A build command that bundles your code with Rollup, pre-configured to output high optimized static assets for production.
  • Vite is highly extensible via its Plugin API and Javascript API with full typing support.

Why Vite ?

Vite commands

Command Description
vite Start dev server with HMR, aliases: vite dev, vite serve.
vite build Build for production, files are output to ./dist.
vite preview Locally preview production build, start a local web server serving built app from ./dist.

Modes

Dev server runs dev(default) in development mode and runs build in production mode, which means dev reads variables from .env.dev and build reads variables from .env.production.

Example:

1
VITE_APP_TITLE=My App

In the app, render title with import.meta.env.VITE_APP_TITLE.

Configuring Vite

When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project root.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// vite.config.js
export default {
base: '/', // basic public path when served in dev or production, for example '/foo/'
plugins: [
Vue(),
VueJsx()
// Array of plugins to use.
],
css: {
preprocessorOptions: {
scss: {
additionalData: '$injectedColor: orange;'
} // Speicify options to pass to CSS pre-processors.
}
},
resolve: {
extensions: ['.mjs', '.js', '.ts'], // 导入模块时想要省略的扩展名,例如import './mod'会尝试导入'./mod.mjs', './mod.js', './mod.ts'
alias: [
// Resolves path aliases to full path.
{
find: 'vue-i18n',
replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
},
{
find: /\@\//,
replacement: `${pathResolve('src')}/`
}
]
},
build: {
minify: 'terser', // boolean | 'terser' | 'esbuild'. Defaults to 'esbuild' which is 20~40 times faster than terser and only 1~2% worse compression. Set to false to disable minification.
},
server: {
port: 4000, // Server port, note that if being used, Vite will try the next port.
proxy: { // custom proxy rules for the dev server, expects an object of '{key: option}' pairs. If key starts with ^, it will be interpreted as Regexp. It is node-http-proxy under the hood.
// string shorthand
'/foo': 'http://localhost:4567',
// with options
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
optimizeDeps: { // Read: https://vitejs.dev/guide/dep-pre-bundling.html
include: [ // By default, linked packages not inside node_modules are not pre-bundled. Use this option to force a linked package to be pre-bundled.
'vue',
'vue-router'
]
}
}

If config needs to conditionally determine options based on the mode, or if it is an SSR build (ssrBuild), export a function instead:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default defineConfig( ({command, mode, ssrBuild}) => {
if (command === 'serve') {
return {
// dev config
}
} else if (command === 'build') {
return {
// build config
}
} else {
// ...
}

})
Vue router
CSS Preprocessors
Vue 3 admin project: vue-element-plus-admin
Strict mode in Javascript
FineReport
Javascript Modules
OAuth2.0
Typescript