Or configuration method

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import { createSvg } from "./src/icons/index";
export default defineConfig({
  // Add svg plugin  plugins: [vue(), createSvg("./src/icons/svg/")],
  // Identify the @ symbol as "./src" directory to start  resolve: {
    alias: {
      "@": resolve("./src"),
    },
  },
  server: {
    // Turn on https, usually not    https: true,
    //Configure proxy forwarding to solve cross-domain problems, and you can configure multiple    proxy: {
      "/abc": {
        target: "http://123.456.78.180/",
        changeOrigin: true,
        ws: true,
        rewrite: (path) =>
          (/^\/abc/, "/abc"),
      }
    },
  },
  css: {
    //css preprocessing    preprocessorOptions: {
      additionalData: '@import "@/styles/";',
    },
  },
});

const path = require('path')
 = {
  publicPath: './', // The packaged object code can be accessed in any directory  // publicPath: '/app/', //The basic URL when deploying the application package.   Use vue-router history mode  outputDir: 'dist', // Directory of production environment construction files  assetsDir: 'static', // outputDir's static resources (js, css, img, fonts) directory  lintOnSave: false,
  productionSourceMap: false, // If you don't need the source map for the production environment, you can set it to false to speed up production environment construction.  devServer: {
    port: 8082, // Port    https: true,// Turn on https, usually not    open: false, // Open the browser after startup    disableHostCheck: true,
    overlay: {
      // When a compiler error or warning appears, full screen overlay is displayed in the browser      warnings: false,
      errors: true
    },
   proxy: {
     //Configure cross-domain      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true // Allow cross-domain        pathRewrite: {
           '/api': '/api'
        }
      }
    }
}

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/* path module is a built-in module. ts is not supported. If using ->npm install @types/node -D */
import { resolve } from 'path';
/*It is also necessary to directly introduce amfe-flexible in main*/
import postCssPxToRem from "postcss-pxtorem";  //npm i postcss-pxtorem -D
export default defineConfig({
  base: "./", 
  plugins: [vue()],
  resolve: {
    alias: {
    /*Define the global path*/
      '@': resolve(__dirname, './src'),
      '^': resolve(__dirname, './src/views'),
      '#': resolve(__dirname, './src/components')
    }
  },
  css: {
    postcss: {
      plugins: [
      /*Adapting rem can also create configurations in the root directory. For details, see: */
        postCssPxToRem({
          rootValue: 75,  //The algorithm for 1rem size px to rem is, the value of the design draft quantity/width of the design draft = the value of the rem          propList: ['*'],  //Attributes that need to be converted          mediaQuery: true,  //Allow to take effect in media queries        })
      ]
    },
    preprocessorOptions: {
      stylus: {
      /*vite According to the official file @import, the introduction of stylus does not take effect. It needs to be imported through an absolute path */
        imports: [resolve(__dirname, 'src/stylus/...styl')]  //Configure global variables      }
    }
  },
  build: {
    minify: 'terser',   //v3 terser is an optional dependency. npm i terser needs to be installed    terserOptions: {
      compress: {
        //Remove console in production environment        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
    /*Output file path*/
      output: {
        entryFileNames: 'static/js/[name]-[hash].js',
        chunkFileNames: 'static/js/[name]-[hash].js',
        /*Static resource filter*/
        assetFileNames: assetInfo => {
          var info = ('.')
          var extType = info[ - 1]
          if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test()) {
            extType = 'img'
          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/()) {
            extType = 'fonts'
          }
          return `static/${extType}/[name]-[hash][extname]`
        },
      }
    }
  },
})