建站
咨詢
售后
建站咨詢
新聞中心
不知道有沒有這樣的兄弟，學(xué)習(xí) Vite 的時(shí)候，官網(wǎng)上各種配置看的是眼花繚亂。不知道哪些需要掌握，哪些只用簡單了解一下。為了提高大家的效率，我把項(xiàng)目中常用的配置梳理了一下分享給大家，希望對你上手 Vite 有所幫助。話不多說，開干！
創(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ò)營銷,網(wǎng)絡(luò)優(yōu)化,仁化網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
css.preprocessorOptions
傳遞給 CSS 預(yù)處理器的配置選項(xiàng)，這些配置會傳遞到預(yù)處理器的執(zhí)行參數(shù)中去。例如，在 scss 中定義一個(gè)全局變量：
// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數(shù)獲取類型提示：
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 也是用來處理 CSS 的，只不過它更像是一個(gè)工具箱，可以添加各種插件來處理 CSS 。像瀏覽器樣式兼容問題、瀏覽器適配等，都可以通過 PostCSS 來解決。
Vite 對 PostCSS 有良好的支持，我們只需要安裝相應(yīng)的插件就可以了。如移動端使用 postcss-px-to-viewport 對不同設(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
})
]
}
}
})
這樣我們書寫的 px 單位就會轉(zhuǎn)為 vw 或 vh ，很輕松地解決了適配問題。
resolve.alias
定義路徑別名也是我們常用的一個(gè)功能，我們通常會給 scr 定義一個(gè)路徑別名：
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 路徑別名
}
}
})
我們也可以使用插件，來自動給 src 和 src 下所有的文件夾定義路徑別名：
// vite.config.js
import { defineConfig } from 'vite'
import { ViteAliases } from './node_modules/vite-aliases' // 通過名稱引入會報(bào)錯(cuò)，可能是插件問題
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)入類型的擴(kuò)展名（例如：.vue），因?yàn)樗鼤绊?IDE 和類型支持。
optimizeDeps.force
是否開啟強(qiáng)制依賴預(yù)構(gòu)建。node_modules 中的依賴模塊構(gòu)建過一次就會緩存在 node_modules/.vite/deps 文件夾下，下一次會直接使用緩存的文件。而有時(shí)候我們想要修改依賴模塊的代碼，做一些測試或者打個(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è)方法，我們還可以通過刪除 .vite 文件夾或運(yùn)行 npx vite --force 來強(qiáng)制進(jìn)行依賴預(yù)構(gòu)建。
server.host
指定服務(wù)器監(jiān)聽哪個(gè) IP 地址。默認(rèn)值為 localhost ，只會監(jiān)聽本地的 127.0.0.1 。當(dāng)我們開發(fā)移動端項(xiàng)目時(shí)，需要在手機(jī)瀏覽器上訪問當(dāng)前項(xiàng)目。這時(shí)候可以將 host 設(shè)置為 true 或 0.0.0.0 ，這樣服務(wù)器就會監(jiān)聽所有地址，包括局域網(wǎng)和公網(wǎng)地址。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true // 監(jiān)聽所有地址
}
})
效果如下：
當(dāng)手機(jī)和電腦處于同一個(gè)網(wǎng)絡(luò)環(huán)境下，我們就可以通過下面那個(gè)地址進(jìn)行訪問了。
server.proxy
反向代理也是我們經(jīng)常會用到的一個(gè)功能，通常我們使用它來進(jìn)行跨域：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
// 字符串簡寫寫法
'/foo': 'http://localhost:4567',
// 選項(xiàng)寫法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正則表達(dá)式寫法
'^/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
開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑?？梢允且韵聨追N值：
- 絕對 URL 路徑，例如 /foo/。
- 完整的 URL，例如 https://foo.com/?。
- 空字符串或 ./（用于嵌入形式的開發(fā)）。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '/foo/' // 開發(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 編碼的閾值。為防止過多的 http 請求，Vite 會將小于此閾值的圖片轉(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)然如果有特殊需求，我們也可以自己寫一個(gè)插件。后續(xù)我也會帶大家手寫一個(gè)自己的插件。
完整代碼
// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函數(shù)獲取類型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
base: '/foo/', // 開發(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)聽所有地址
proxy: {
// 字符串簡寫寫法
'/foo': 'http://localhost:4567',
// 選項(xiàng)寫法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正則表達(dá)式寫法
'^/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í)日常開發(fā)掌握這些配置就足夠了，如果遇到特殊的場景我們再去查文檔就可以，而不需要一開始就把所有配置都學(xué)習(xí)一遍。Vite 配置整體來說和 Webpack 大同小異，只不過 Vite 更傻瓜式，把能做的基本都幫我們做好了。我們只用修改少量配置，甚至不用修改配置，就可以滿足日常開發(fā)的需求。
網(wǎng)頁名稱：Vite 配置篇：日常開發(fā)掌握這些配置就夠了！
文章轉(zhuǎn)載：http://m.5511xx.com/article/cojcioo.html
