vite中文網文檔地址：vite中文網
文章最后附上vite.config.js完整代碼
項目碼云地址: https://gitee.com/April_lee/admin-project

文章vite版本基于: "^2.0.5"

Vite 2.0 core 現在與框架無關。現在通過@vitejs/plugin-vue這個插件來支持Vue。

npm i @vitejs/plugin-vue
or
yarn add @vitejs/plugin-vue

然后在vite.config.js中導入這3個依賴

import { defineConfig } from "vite";  // 幫手函數，這樣不用 jsdoc 注解也可以獲取類型提示
import { resolve } from "path"; // 主要用于alias文件路徑別名
import vue from '@vitejs/plugin-vue'; 

然后基于resolve寫個小方法，方便以后新增別名使用(非必要)

function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}

接下來進入重要環節

export default defineConfig({
      plugins:[vue()], // 配置需要使用的插件列表，這里將vue添加進去
      // 配置文件別名 vite1.0是/@/  2.0改為/@
      // 這里是將src目錄配置別名為 /@ 方便在項目中導入src目錄下的文件
      resolve: {
          alias: {
            "/@": pathResolve("src"),
          }
      },
      // 強制預構建插件包
      optimizeDeps: {
          include: ['axios'],
      },
      // 打包配置
      build: {
          target: 'modules',
          outDir: 'dist', //指定輸出路徑
          assetsDir: 'assets', // 指定生成靜態資源的存放路徑
          minify: 'terser' // 混淆器，terser構建后文件體積更小
      },
      // 本地運行配置，及反向代理配置
      server: {
          cors: true, // 默認啟用并允許任何源
          open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序
          //反向代理配置，注意rewrite寫法，開始沒看文檔在這里踩了坑
          proxy: {
              '/api': {
                  target: 'http://192.168.99.223:3000',   //代理接口
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^\/api/, '')
            }
          }
      }
})

以上就是vue.config.js文件的基本配置，需要更多配置的可以參考文檔進行配置

下面附上我自己的完整代碼

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from '@vitejs/plugin-vue';
function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}

export default defineConfig({
    base: "",
    plugins:[vue()],
    resolve: {
        alias: {
          "/@": pathResolve("src"),
        }
    },
    optimizeDeps: {
        include: ['axios'],
    },
    build: {
      target: 'modules',
      outDir: 'dist',
      assetsDir: 'assets',
      minify: 'terser' // 混淆器
    },
    server: {
        cors: true,
        open: true,
        proxy: {
          '/api': {
              target: 'http://192.168.99.223:3000',   //代理接口
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
    }
});