vite基本常見的配置講解

更新時間：2023年11月10日 15:46:43 作者：讀心悅

這篇文章主要給大家介紹了關(guān)于vite基本常見配置講解的相關(guān)資料,最近做項目要求將webpack打包方式換成vite,下面將詳細講解一下配置vite需要改動的東西,需要的朋友可以參考下

前言

最近在搗鼓一下vite，因為自己一直在使用react，就選擇vite、react來體驗一下vite。

使用最簡單的方法創(chuàng)建一個應(yīng)用：yarn create vite，然后選擇react框架。

vite默認配置是使用了defineConfig工具函數(shù)：

import { defineConfig } from 'vite'
export default defineConfig({
  // ...
})

不管是js還是ts，都可以直接使用defineConfig工具函數(shù)，如果需要基于dev、serve或者build命令來選擇不同選項，那就選擇導(dǎo)出一個函數(shù)，比如：

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 獨有配置
    }
  } else {
    // command === 'build'
    return {
      // build 獨有配置
    }
  }
})

共享選項

root

這是項目根目錄【index.html的位置】，可以根據(jù)自己項目的規(guī)范來配置。比如：

const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  return {
    root,
    plugins: [react()]
  };
});

base

開發(fā)或者生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑：

mode

mode就是指明模式，比如：development或者production，如果在vite.config.ts中配置的話，那么就會把serve和build模式下覆蓋掉

plugin

應(yīng)用需用用到的插件，是一個數(shù)組，因為應(yīng)用中可能使用到很多插件。vite+react中插件就是react，比如：

import react from "@vitejs/plugin-react";
const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()]
  };
});

resolve.alias

設(shè)置別名，比如：完整配置

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

const root: string = process.cwd();

// 查找路徑
const pathResolve = (dir: string): string => {
  return resolve(__dirname, ".", dir);
};
// 別名
const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "@build": pathResolve("build"),
};
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()],
    resolve: {
      alias,
    },
  };
});

server

開發(fā)服務(wù)器配置選項。

host，指定開發(fā)服務(wù)器監(jiān)聽的某個IP地址，如果是設(shè)置為0.0.0.0或者true，那就是默認監(jiān)聽所有的地址。
port，開發(fā)服務(wù)器端口號
strictPort，設(shè)置為true的時候，遇到端口號被占用了，就會直接退出，
https，是否開啟HTTPS
open，自動在瀏覽器中開啟應(yīng)用程序
proxy，請求路徑的代理，比如

export default defineConfig({
  server: {
    proxy: {
      // 字符串簡寫寫法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 帶選項寫法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // 正則表達式寫法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // 使用 proxy 實例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的實例
        }
      },
      // 代理 websockets 或 socket.io 寫法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})