vite基本常見的配置講解
前言
最近在搗鼓一下vite,因?yàn)樽约阂恢痹谑褂胷eact,就選擇vite、react來體驗(yàn)一下vite。
使用最簡(jiǎn)單的方法創(chuàng)建一個(gè)應(yīng)用:yarn create vite
,然后選擇react框架。
vite默認(rèn)配置是使用了defineConfig工具函數(shù):
import { defineConfig } from 'vite' export default defineConfig({ // ... })
不管是js還是ts,都可以直接使用defineConfig工具函數(shù),如果需要基于dev、serve或者build命令來選擇不同選項(xiàng),那就選擇導(dǎo)出一個(gè)函數(shù),比如:
export default defineConfig(({ command, mode, ssrBuild }) => { if (command === 'serve') { return { // dev 獨(dú)有配置 } } else { // command === 'build' return { // build 獨(dú)有配置 } } })
共享選項(xiàng)
root
這是項(xiàng)目根目錄【index.html的位置】,可以根據(jù)自己項(xiàng)目的規(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中配置的話,那么就會(huì)把serve和build模式下覆蓋掉
plugin
應(yīng)用需用用到的插件,是一個(gè)數(shù)組,因?yàn)閼?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ù)器配置選項(xiàng)。
- host,指定開發(fā)服務(wù)器監(jiān)聽的某個(gè)IP地址,如果是設(shè)置為
0.0.0.0
或者true,那就是默認(rèn)監(jiān)聽所有的地址。 - port,開發(fā)服務(wù)器端口號(hào)
- strictPort,設(shè)置為true的時(shí)候,遇到端口號(hào)被占用了,就會(huì)直接退出,
- https,是否開啟HTTPS
- open,自動(dòng)在瀏覽器中開啟應(yīng)用程序
- proxy,請(qǐng)求路徑的代理,比如
export default defineConfig({ server: { proxy: { // 字符串簡(jiǎn)寫寫法:http://localhost:5173/foo -> http://localhost:4567/foo '/foo': 'http://localhost:4567', // 帶選項(xiàng)寫法:http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, // 正則表達(dá)式寫法:http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/ '^/fallback/.*': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/fallback/, ''), }, // 使用 proxy 實(shí)例 '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, configure: (proxy, options) => { // proxy 是 'http-proxy' 的實(shí)例 } }, // 代理 websockets 或 socket.io 寫法:ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io '/socket.io': { target: 'ws://localhost:5174', ws: true, }, }, }, })
總結(jié)
到此這篇關(guān)于vite基本常見的配置講解的文章就介紹到這了,更多相關(guān)vite常見配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解
在實(shí)際業(yè)務(wù)中,我們常用圖表來做數(shù)據(jù)統(tǒng)計(jì),數(shù)據(jù)展示,數(shù)據(jù)可視化等比較直觀的方式來達(dá)到一目了然的數(shù)據(jù)查看,但在大屏開發(fā)過程中,常會(huì)因?yàn)檫m配不同屏幕而感到困擾,下面我們來解決一下這個(gè)不算難題的難題2022-11-11vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08