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

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

Vite 2.0 core 現(xiàn)在與框架無關(guān)∑ヤ蹋現(xiàn)在通過@vitejs/plugin-vue這個(gè)插件來支持Vue虐沥。

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

然后在vite.config.js中導(dǎo)入這3個(gè)依賴

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

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

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

接下來進(jìn)入重要環(huán)節(jié)

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

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

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

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/, '')
          }
        }
    }
});