Vite configuration file

The default configuration

export default {
  // Configure options
}
Copy the code

Intelligent code hints

/ * * *@type {import('vite').UserConfig}* /
const config = {
  // ...
}

export default config
Copy the code
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})
Copy the code

Parameter configuration

export default ({ command, mode }) => {
  if (command === 'serve') {
    return {
      // Serve is uniquely configured}}else {
    return {
      // Build unique configuration}}}Copy the code

Configuration parameters


/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}* /
export default {
    // Project root directory
    root: process.cwd(),
    // The base path for project deployment
    base: "/".// Environment configuration
    mode: 'development'.Record
      ,>
    define: {
        "": ""."user": "users",},/ / the plugin
    plugins: [].// Static resource services folder
    publicDir: "public".resolve: {
        / / alias
        alias: {
            "@": path.resolve(__dirname, "/src"),
            "comps": path.resolve(__dirname, "/src/components")},dedupe: [].// Scenario exports exports field in package.json configuration
        conditions: [].// Parse the fields in package.json
        mainFields: ['module'.'jsnext:main'.'jsnext'].// List of extension names you want to omit when importing
        extensions: ['.mjs'.'.js'.'.ts'.'.jsx'.'.tsx'.'.json']},css: {
        // Sets the behavior of the CSS modules. Options will be passed to postCSS-modules.
        modules: {},// PostCSS configuration (in the same format as postcss.config.js)
        // Postcss-load-config plug-in configuration
        postcss: {},// Specifies the options passed to the CSS preprocessor
        preprocessorOptions: {
            scss: {
                additionalData: `$injectedColor: orange; `}}},json: {
        // Whether import by name from.json files is supported
        namedExports: true.Parse ("...") export default json.parse ("... ) will perform better than translating into object literals,
        // Especially if the JSON file is large.
        // If this option is enabled, import by name is disabled
        stringify: false
    },
    // Inherits from the esbuild conversion option. The most common use case is custom JSX
    esbuild: {
        jsxFactory: 'h'.jsxFragment: 'Fragment'.jsxInject: `import React from 'react'`
    },
    / / static resource handling string | regular expressions
    assetsInclude: ' './ / adjust the console output level 'info' | 'warn' | 'error' | 'silent'
    logLevel: 'info'.// Set to false to prevent Vite from clearing the screen and missing printing some key information in the terminal
    clearScreen: true./ / service
    server: {
        // Host name of the server
        host: ""./ / the port number
        port: "".// If the port is set to true, it will exit if the port is already occupied.
        // Instead of trying the next available port
        strictPort: true./ / HTTPS. CreateServer () configuration items
        https: "".// The server starts up and automatically opens the application in the browser.
        // When this value is a string, it is used as the pathname of the URL
        open: '/docs/index.html'.// Customize proxy rules
        proxy: {
            // Short for string
            '/foo': 'http://localhost:4567/foo'.// This is an option
            '/api': {
                target: 'http://jsonplaceholder.typicode.com'.changeOrigin: true.rewrite: (path) = > path.replace(/^\/api/.' ')},// Regular expression
            '^/fallback/.*': {
                target: 'http://jsonplaceholder.typicode.com'.changeOrigin: true.rewrite: (path) = > path.replace(/^\/fallback/.' ')}},// The development server is configured with CORS
        //boolean | CorsOptions
        cors: {},// Set to true forces dependency prebuild
        force: true.// Disable or configure HMR connections
        hmr: {},// File system monitor options passed to Chokidar
        watch: {}},/ / build
    build: {
        / / browser compatibility "esnext" | "modules"
        target: "modules".// Output path
        outDir: "dist".// Generate the static resource storage path
        assetsDir: "assets".// Import or reference resources less than this threshold are base64 encoded inline to avoid additional HTTP requests. Setting this to 0 disables this item completely
        assetsInlineLimit: 4096.// Enable/disable CSS code splitting
        cssCodeSplit: true.// Whether to generate the source map file after the build
        sourcemap: false.// Customize the underlying Rollup package configuration
        rollupOptions: {},//@rollup/ plugin-commonJS plugin option
        commonjsOptions: {},// Build the library
        lib: {},// When set to true, the manifest.json file will be generated after the build
        manifest: false.// Set to false to disable obfuscation minimization,
        // Or to specify which obfuscation to use
        //boolean | 'terser' | 'esbuild'
        minify: "terser".// More Minify options passed to Terser.
        terserOptions: {},// Set to false to disable writing the built files to disk
        write: true.// By default, if outDir is in the root directory, Vite clears that directory at build time.
        emptyOutDir: true.// Enable/disable brotli compressed size reporting
        brotliSize: true.// Limitations of chunk size warnings
        chunkSizeWarningLimit: 500
    },
    // Rely on optimization options
    optimizeDeps: {
        // Detect dependencies that need to be pre-built
        entries: [].// Mandatory exclusion of dependencies in prebuild
        exclude: [].// By default, linked packages are not prebuilt if they are not in node_modules. Use this option to force the prebuild of linked packages.
        include: []},/ / SSR options
    ssr: {
        // Lists the dependencies to enforce externalization for SSR
        external: [].// Lists the dependencies that prevent externalization by SSR.
        noExternal: []}}Copy the code