After creating a project with vite, it will automatically generate a vite.config.js code as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
 plugins: [vue()],
})
Copy the code

When you run vite from a command, vite automatically parses the vite.config.js files in the project root directory. When the configuration is incomplete, it works fine in the development environment, but when it comes time to pack up and go live, there will be various problems. Such as:

  • For example, if base is not configured, a blank screen is displayed after the package is packaged.
  • If the alias is not configured, you need to find the root directory each time importing files, which is troublesome.

Here are more common parameter configurations of vite.config.js and their meanings:

Import {defineConfig} from 'vite' // helper function Import vue from '@vitejs/plugin-vue' const {resolve} = require('path') import {viteMockServe}  from "vite-plugin-mock" const localEnabled = process.env.USE_MOCK || false; const prodEnabled = process.env.USE_CHUNK_MOCK || false; // https://vitejs.dev/config/ export default () => defineConfig({ plugins: Vue (), viteMockServe({mockPath: "./ SRC /server/mock", localEnabled: LocalEnabled, // Mock prodEnabled: ProdEnabled, / / prodEnabled, / / package switch / / shut down so that you can control the mock don't let the mock packaging in the final code injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `, logger: // Whether to display the request log on the console supportTs:false // When opened, the ts file can be read. {// Detect dependencies that need to be pre-built entries: [], // By default, linked packages that are not in node_modules do not pre-build include: ['axios'], exclude:['your-package-name'] // exclude:['your-package-name'] // Exclude :['your-package-name'] // './', // static resource processing assetsInclude: "", // console output levels info, WARN, error, silent logLevel: ClearScreen :true, resolve: {alias: [// Configure alias {find: '@', replacement: Resolve (__dirname, 'SRC ')}], // export package.json [], / / import to omit the extension of the list / / do not recommend using the vue affect IDE and type support extensions: [' MJS ', 'javascript' and 'ts',' JSX ', 'benchmark', 'json']}, / / CSS CSS: Modules :{}, // postCss :{}, // postCss :{}, // Specify the options passed to the CSS preprocessor preprocessorOptions:{SCSS: { additionalData:`$injectedColor:orange; '}}}, json: {// Whether to import namedExports from. Json files: true, // If set to true, the imported JSON will be converted to export default json.parse (".."). ) will perform better than translating object literals, // inherits the esbuild conversion option, and the most common use cases are custom JSX esbuild: {jsxFactory: "h", jsxFragment: "Fragment", jsxInject: 'import Vue from' Vue ' '}, // Run local configuration, and reverse proxy configuration server: {host: "localhost", HTTPS: False,// Whether to enable HTTP 2 cors: true,// Configure cORS for the development server, default to enable and allow any source open: true,// service startup automatically open the application in the browser port: "9000", strictPort: Force: true,// Whether to force a dependency on prebuilt HMR: False,// Disable or configure HMR connections // Pass the file system monitor option to Chockidar watch: {ignored: [! "* * / node_modules/your - package - name / * *"]}, / / reverse proxy configuration proxy: {'/API: {target: "https://xxxx.com/", changeOrigin: true, rewrite: (path) => path.replace(/^/ API /, '')}}}, // Package configuration build: {/ / browser compatibility "esnext" | "modules" target: "modules", / / specified output path outDir: "dist", / / generates static resource repository paths assetsDir: "Assets ", // Import or reference resources less than this threshold are base64 encoded inline to avoid additional HTTP requests. Set to 0 to disable assetsInlineLimit: 4096, // Enable/disable CSS code splitting cssCodeSplit: true, // Whether to generate sourcemap file sourcemap: RollupOptions: {}, //@rollup/ plugin-commonJsOptions: {}, // build library lib: {}, // When set to true, the build will generate the manifest.json file manifest: False, / / set to false to disable to minimize confusion, using / / or used to specify which confused / / a Boolean | 'terser' | 'esbuild minify: "Terser ", // Terser builds smaller files // More minify options passed to Terser. TerserOptions: {}, // set to false to disable writing built files to disk write: true, // By default, if outDir is in the root directory, Vite will clear that directory at build time. EmptyOutDir: true, // Enable/disable brotli compression size report brotliSize: true, // chunkSizeWarningLimit: 500}, SSR: External: []; noExternal: []}})Copy the code

Well xiaobian today’s article is over, like me can point a concern oh