建站
咨詢
售后
建站咨詢
新聞中心
不知道有沒(méi)有這樣的兄弟，學(xué)習(xí) Vite 的時(shí)候，官網(wǎng)上各種配置看的是眼花繚亂。不知道哪些需要掌握，哪些只用簡(jiǎn)單了解一下。為了提高大家的效率，我把項(xiàng)目中常用的配置梳理了一下分享給大家，希望對(duì)你上手 Vite 有所幫助。話不多說(shuō)，開(kāi)干！
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),仁化企業(yè)網(wǎng)站建設(shè),仁化品牌網(wǎng)站建設(shè),網(wǎng)站定制,仁化網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,仁化網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
css.preprocessorOptions
傳遞給 CSS 預(yù)處理器的配置選項(xiàng)，這些配置會(huì)傳遞到預(yù)處理器的執(zhí)行參數(shù)中去。例如，在 scss 中定義一個(gè)全局變量：
// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數(shù)獲取類(lèi)型提示：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;` // 全局變量
}
}
}
})
我們也可以定義一個(gè)全局變量文件，然后再引入這個(gè)文件：
// src/assets/styles/variables.scss
$injectedColor: orange;
$injectedFontSize: 16px;
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局變量文件
}
}
}
})
這樣在 .scss 文件或 .vue 文件中就可以使用這些變量了。
css.postcss
PostCSS 也是用來(lái)處理 CSS 的，只不過(guò)它更像是一個(gè)工具箱，可以添加各種插件來(lái)處理 CSS 。像瀏覽器樣式兼容問(wèn)題、瀏覽器適配等，都可以通過(guò) PostCSS 來(lái)解決。
Vite 對(duì) PostCSS 有良好的支持，我們只需要安裝相應(yīng)的插件就可以了。如移動(dòng)端使用 postcss-px-to-viewport 對(duì)不同設(shè)備進(jìn)行布局適配：
npm install postcss-px-to-viewport -D
// vite.config.js
import { defineConfig } from 'vite'
import postcssPxToViewport from 'postcss-px-to-viewport'
export default defineConfig({
css: {
postcss: {
plugins: [
// viewport 布局適配
postcssPxToViewport({
viewportWidth: 375
})
]
}
}
})
這樣我們書(shū)寫(xiě)的 px 單位就會(huì)轉(zhuǎn)為 vw 或 vh ，很輕松地解決了適配問(wèn)題。
resolve.alias
定義路徑別名也是我們常用的一個(gè)功能，我們通常會(huì)給 scr 定義一個(gè)路徑別名：
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 路徑別名
}
}
})
我們也可以使用插件，來(lái)自動(dòng)給 src 和 src 下所有的文件夾定義路徑別名：
// vite.config.js
import { defineConfig } from 'vite'
import { ViteAliases } from './node_modules/vite-aliases' // 通過(guò)名稱引入會(huì)報(bào)錯(cuò)，可能是插件問(wèn)題
export default defineConfig({
plugins: [
ViteAliases()
]
})
相應(yīng)的路徑別名如下：
src -> @
assets -> @assets
components -> @components
router -> @router
stores -> @stores
views -> @views
...
resolve.extensions
導(dǎo)入時(shí)想要省略的擴(kuò)展名列表。默認(rèn)值為 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] 。
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
extensions: ['.js', '.ts', '.json'] // 導(dǎo)入時(shí)想要省略的擴(kuò)展名列表
}
})
注意：不建議忽略自定義導(dǎo)入類(lèi)型的擴(kuò)展名（例如：.vue），因?yàn)樗鼤?huì)影響 IDE 和類(lèi)型支持。
optimizeDeps.force
是否開(kāi)啟強(qiáng)制依賴預(yù)構(gòu)建。node_modules 中的依賴模塊構(gòu)建過(guò)一次就會(huì)緩存在 node_modules/.vite/deps 文件夾下，下一次會(huì)直接使用緩存的文件。而有時(shí)候我們想要修改依賴模塊的代碼，做一些測(cè)試或者打個(gè)補(bǔ)丁，這時(shí)候就要用到強(qiáng)制依賴預(yù)構(gòu)建。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
optimizeDeps: {
force: true // 強(qiáng)制進(jìn)行依賴預(yù)構(gòu)建
},
})
除了這個(gè)方法，我們還可以通過(guò)刪除 .vite 文件夾或運(yùn)行 npx vite --force 來(lái)強(qiáng)制進(jìn)行依賴預(yù)構(gòu)建。
server.host
指定服務(wù)器監(jiān)聽(tīng)哪個(gè) IP 地址。默認(rèn)值為 localhost ，只會(huì)監(jiān)聽(tīng)本地的 127.0.0.1 。當(dāng)我們開(kāi)發(fā)移動(dòng)端項(xiàng)目時(shí)，需要在手機(jī)瀏覽器上訪問(wèn)當(dāng)前項(xiàng)目。這時(shí)候可以將 host 設(shè)置為 true 或 0.0.0.0 ，這樣服務(wù)器就會(huì)監(jiān)聽(tīng)所有地址，包括局域網(wǎng)和公網(wǎng)地址。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true // 監(jiān)聽(tīng)所有地址
}
})
效果如下：
當(dāng)手機(jī)和電腦處于同一個(gè)網(wǎng)絡(luò)環(huán)境下，我們就可以通過(guò)下面那個(gè)地址進(jìn)行訪問(wèn)了。
server.proxy
反向代理也是我們經(jīng)常會(huì)用到的一個(gè)功能，通常我們使用它來(lái)進(jìn)行跨域：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
// 字符串簡(jiǎn)寫(xiě)寫(xiě)法
'/foo': 'http://localhost:4567',
// 選項(xiàng)寫(xiě)法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正則表達(dá)式寫(xiě)法
'^/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í)例
}
},
// Proxying websockets or socket.io
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}
}
})
base
開(kāi)發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑?？梢允且韵聨追N值：
- 絕對(duì) URL 路徑，例如 /foo/。
- 完整的 URL，例如 https://foo.com/?。
- 空字符串或 ./（用于嵌入形式的開(kāi)發(fā)）。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '/foo/' // 開(kāi)發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑
})
build.outdir
指定打包文件的輸出目錄。默認(rèn)值為 dist ，當(dāng) dist 被占用或公司有統(tǒng)一命名規(guī)范時(shí)，可進(jìn)行調(diào)整。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
outDir: 'build' // 打包文件的輸出目錄
}
})
build.assetsDir
指定生成靜態(tài)資源的存放目錄。默認(rèn)值為 assets ，可根據(jù)需要進(jìn)行調(diào)整。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
assetsDir: 'static' // 靜態(tài)資源的存放目錄
}
})
build.assetsInlineLimit
圖片轉(zhuǎn) base64 編碼的閾值。為防止過(guò)多的 http 請(qǐng)求，Vite 會(huì)將小于此閾值的圖片轉(zhuǎn)為 base64 格式，可根據(jù)實(shí)際需求進(jìn)行調(diào)整。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
assetsInlineLimit: 4096 // 圖片轉(zhuǎn) base64 編碼的閾值
}
})
plugins
插件相信大家都不陌生了。我們可以使用官方插件，也可以社區(qū)插件。如使用 @vitejs/plugin-vue 提供 Vue3 單文件組件的支持，使用 vite-plugin-mock 讓我們更輕松地 mock 數(shù)據(jù)。
npm i mockjs -S
npm i vite-plugin-mock -D
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
viteMockServe()
]
})
更多社區(qū)插件，大家可以查看 awesome-vite 。當(dāng)然如果有特殊需求，我們也可以自己寫(xiě)一個(gè)插件。后續(xù)我也會(huì)帶大家手寫(xiě)一個(gè)自己的插件。
完整代碼
// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數(shù)獲取類(lèi)型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
base: '/foo/', // 開(kāi)發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑
optimizeDeps: {
force: true // 強(qiáng)制進(jìn)行依賴預(yù)構(gòu)建
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局變量文件
}
},
postcss: {
plugins: [
// viewport 布局適配
postcssPxToViewport({
viewportWidth: 375
})
]
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 路徑別名
},
extensions: ['.js', '.ts', '.json'] // 導(dǎo)入時(shí)想要省略的擴(kuò)展名列表
},
server: {
host: true, // 監(jiān)聽(tīng)所有地址
proxy: {
// 字符串簡(jiǎn)寫(xiě)寫(xiě)法
'/foo': 'http://localhost:4567',
// 選項(xiàng)寫(xiě)法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正則表達(dá)式寫(xiě)法
'^/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í)例
}
},
// Proxying websockets or socket.io
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}
},
build: {
outDir: 'build', // 打包文件的輸出目錄
assetsDir: 'static', // 靜態(tài)資源的存放目錄
assetsInlineLimit: 4096 // 圖片轉(zhuǎn) base64 編碼的閾值
},
plugins: [
vue(),
viteMockServe()
]
})
小結(jié)
其實(shí)日常開(kāi)發(fā)掌握這些配置就足夠了，如果遇到特殊的場(chǎng)景我們?cè)偃ゲ槲臋n就可以，而不需要一開(kāi)始就把所有配置都學(xué)習(xí)一遍。Vite 配置整體來(lái)說(shuō)和 Webpack 大同小異，只不過(guò) Vite 更傻瓜式，把能做的基本都幫我們做好了。我們只用修改少量配置，甚至不用修改配置，就可以滿足日常開(kāi)發(fā)的需求。
當(dāng)前名稱：Vite 配置篇：日常開(kāi)發(fā)掌握這些配置就夠了！
當(dāng)前路徑：http://m.fisionsoft.com.cn/article/cojcioo.html
