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.
// vite.config.js exportdefault { 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: