建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
一、基礎(chǔ)
npm init vite@latest
2.配置文件
創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元蘇州做網(wǎng)站,已為上家服務(wù),為蘇州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18982081108
項(xiàng)目跟目錄下的配置文件為vite.config.js文件，當(dāng)以命令行方式運(yùn)行vite時(shí)，Vite會(huì)自動(dòng)解析該文件，其基礎(chǔ)配置如下所示：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 使用defineConfig工具函數(shù)，不用jsdoc注解也可以獲取類(lèi)型提示
export default defineConfig({
plugins: [vue()]
})
3.情景配置
如果配置需要基于(dev/serve或build)命令或者不同的模式來(lái)決定選項(xiàng)，則可以選擇導(dǎo)出如下函數(shù)：
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
// 使用defineConfig工具函數(shù)，不用jsdoc注解也可以獲取類(lèi)型提示
export default defineConfig(({command, mode}) => {
console.log(command, mode); // 開(kāi)發(fā)環(huán)境command值為serve，生產(chǎn)環(huán)境為build
if (command === 'serve') {
return {
plugins: [vue()]
};
} else {
return {
plugins: [vue()]
};
}
});
二、vite為什么快
拜讀了vite的官方文檔，其官方文檔已經(jīng)給了很明確的解釋https://vitejs.cn/guide/why.html#the-problems，總結(jié)下來(lái)主要是以下幾點(diǎn)：
提升vite服務(wù)器啟動(dòng)速度
類(lèi)似于webpack這種打包器方式的構(gòu)建工具，其首先會(huì)打包所有資源為bundle，然后才啟動(dòng)服務(wù)，而vite將該過(guò)程后置并做了一些優(yōu)化來(lái)提升服務(wù)器的啟動(dòng)速度，主要如下所示：
(1)通過(guò)esbuild預(yù)構(gòu)建依賴(lài)
依賴(lài)指的是在開(kāi)發(fā)時(shí)不會(huì)變動(dòng)的純JavaScript，主要包含node_modules下的文件，該內(nèi)容通常包含多種模塊化格式(CommonJS、UMD、ESM等)，所以需要進(jìn)行轉(zhuǎn)換為原生的ES模塊，為了完成該轉(zhuǎn)換過(guò)程，引入esbuild進(jìn)行預(yù)構(gòu)建依賴(lài)，由于Esbuild使用go編寫(xiě)，其構(gòu)建速度相比于JavaScript編寫(xiě)的打包器構(gòu)建速度更快。
(2)現(xiàn)代瀏覽器支持ESM格式的代碼
由于瀏覽器支持ESM格式的代碼，所以瀏覽器可接管打包程序的部分工作，Vite只需要在瀏覽器請(qǐng)求源碼時(shí)進(jìn)行轉(zhuǎn)換并按需提供源碼。
基于 ESM 的開(kāi)發(fā)服務(wù)器
加快更新速度
為了加快更新速度，Vite做了很多優(yōu)化，主要體現(xiàn)在以下幾點(diǎn)：
(1)減少網(wǎng)絡(luò)請(qǐng)求
esbuild預(yù)構(gòu)建依賴(lài)時(shí)，將許多內(nèi)部模塊的ESM依賴(lài)關(guān)系轉(zhuǎn)換為單個(gè)模塊，從而減少網(wǎng)絡(luò)請(qǐng)求個(gè)數(shù)，提高頁(yè)面加載性能
(2)緩存
源碼模塊的請(qǐng)求會(huì)根據(jù) 304 Not Modified 進(jìn)行協(xié)商緩存，而依賴(lài)模塊請(qǐng)求則會(huì)通過(guò) Cache-Control: max-age=31536000,immutable 進(jìn)行強(qiáng)緩存，因此一旦被緩存它們將不需要再次請(qǐng)求
三、配置項(xiàng)
Vite為了方便用戶(hù)使用，提供了很多配置項(xiàng)，主要包含7類(lèi)：共享配置、開(kāi)發(fā)服務(wù)選項(xiàng)、構(gòu)建選項(xiàng)、預(yù)覽選項(xiàng)、依賴(lài)優(yōu)化選項(xiàng)、SSR選項(xiàng)、Worker選項(xiàng)，我個(gè)人認(rèn)為最重要的是前三類(lèi)選項(xiàng)，接下來(lái)一起來(lái)看看這前三個(gè)選項(xiàng)。
3.1 共享選項(xiàng)
共享選項(xiàng)指的是不管是開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境vite均會(huì)執(zhí)行的配置項(xiàng)，主要用來(lái)表征一些通用內(nèi)容，下面我列舉幾個(gè)自己認(rèn)為重要的來(lái)展示出來(lái)。
1.root
項(xiàng)目根目錄(即index.html文件)所在的位置，例如當(dāng)index.html文件及src文件夾在testRoot文件件下時(shí)，其配置如下所示：
export default defineConfig({
root: './testRoot',
plugins: [vue()]
});
2.base
用于設(shè)置公共文件路徑，例如按如下設(shè)置后在開(kāi)發(fā)環(huán)境下可通過(guò)http://localhost:3000/testBase訪問(wèn)到所需頁(yè)面：
export default defineConfig({
base: '/testBase/',
plugins: [vue()]
});
3.mode
用于指示本次的開(kāi)發(fā)模式(development)還是生產(chǎn)模式(production)，其會(huì)把serve和build時(shí)的模式都覆蓋掉，也可通過(guò)--mode選項(xiàng)來(lái)重寫(xiě)：
export default defineConfig({
plugins: [vue()],
mode: 'production'
});
4.plugins
設(shè)置需要用到的插件數(shù)組，插件是用來(lái)解決純粹vite提供的開(kāi)箱即用的功能無(wú)法滿(mǎn)足時(shí)所提供的一種能力，例如通過(guò)@vitejs/plugin-vue提供對(duì)Vue3單文件組件的支持：
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()]
});
5.publicDir
該配置設(shè)置靜態(tài)資源服務(wù)的文件，該配置默認(rèn)是public文件件，該目錄中的文件在開(kāi)發(fā)期間在/處提供，并在構(gòu)建期間復(fù)制到outDir的根目錄，如下是將靜態(tài)資源服務(wù)的文件設(shè)置到./testPublicDir下：
export default defineConfig({
plugins: [vue()],
publicDir: './testPublicDir'
});
6.resolve.alias
使用該配置用于設(shè)置文件系統(tǒng)路徑的別名，設(shè)置路徑是使用使用絕對(duì)路徑，使用相對(duì)路徑的別名值會(huì)原封不動(dòng)的被使用：
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
});
7.envDir與envPrefix
有的時(shí)候需要設(shè)置一些環(huán)境變量在代碼中使用，通過(guò)envDir可以設(shè)置環(huán)境變量文件的目錄(默認(rèn)為根目錄)，通過(guò)envPrefix可以設(shè)置暴露給環(huán)境變量的前綴(默認(rèn)為VITE_)，設(shè)置好之后就可以通過(guò)import.meta.env在代碼中讀取該變量。該目錄下所能讀取的文件主要有以下幾種：
.env # 所有情況下都會(huì)加載
.env.local # 所有情況下都會(huì)加載，但會(huì)被 git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local # 只在指定模式下加載，但會(huì)被 git 忽略
文件中的內(nèi)容可按如下設(shè)置：
VITE_TEST=test // 可以被讀取
TEST=test // 不能被讀取
3.2 開(kāi)發(fā)服務(wù)選項(xiàng)
在開(kāi)發(fā)環(huán)境時(shí)除了要注意共享選項(xiàng)，更要注意開(kāi)發(fā)服務(wù)選項(xiàng)，該選項(xiàng)直接表征我們?nèi)绾闻渲胿ite服務(wù)器，我認(rèn)為常用的選項(xiàng)如下所示：
export default defineConfig({
plugins: [vue()],
server: {
// 是否自動(dòng)在瀏覽器中打開(kāi)應(yīng)用程序
open: true,
// 指定服務(wù)器應(yīng)該監(jiān)聽(tīng)哪個(gè)IP地址
host: '127.0.0.1',
// 指定開(kāi)發(fā)服務(wù)器的端口號(hào)
port: 8080,
// 代理
proxy: {
'/api': {
target: 'http://127.0.0.1:8888',
changeOrigin: true,
rewrite: path => path.replace('^/api', '')
}
}
}
});
3.3 構(gòu)建選項(xiàng)
當(dāng)系統(tǒng)開(kāi)發(fā)完畢之后肯定需要打包構(gòu)建，進(jìn)而發(fā)布，vite的打包構(gòu)建利用了rollup的能力，打包構(gòu)建的選項(xiàng)在構(gòu)建選項(xiàng)中，我認(rèn)為常用的選項(xiàng)如下所示：
export default defineConfig({
plugins: [vue()],
build: {
// 設(shè)置最終構(gòu)建的瀏覽器兼容目標(biāo)（默認(rèn)值是‘modules’）
target: 'es2015',
// 指定輸出路徑,默認(rèn)是dist
outDir: 'testOutDir',
// 指定生成靜態(tài)資源的存放路徑，默認(rèn)assets
assetsDir: 'public',
// 指定小于多少大小的內(nèi)容將內(nèi)聯(lián)為base64，減少請(qǐng)求次數(shù)（默認(rèn)4096，即4kb）
assetsInlineLimit: 4096,
// 構(gòu)建后是否生成source map文件，默認(rèn)為false
sourcemap: true,
// 自定義底層的Rollup配置（一般不需要配置）
rollupOptions: {
// 指定打包的入口文件
input: {
default: './index.html'
},
// 指定文件輸出的配置
output: {
// 用于從入口點(diǎn)創(chuàng)建的塊的打包輸出格式[name]表示文件名,[hash]表示該文件內(nèi)容hash值
entryFileNames: 'test/test-[name]-[hash].js',
// 用于命名代碼拆分時(shí)創(chuàng)建的共享塊的輸出命名
chunkFileNames: 'js/test-[name]-[hash].js',
// 用于輸出靜態(tài)資源的命名，[ext]表示文件擴(kuò)展名
assetFileNames: 'assets/test-[name]-[hash].[ext]'
}
},
// 是否產(chǎn)出mainfest.json文件，該文件包含了沒(méi)有被hash的資源名和hash后版本的映射
manifest: true
}
});
四、單頁(yè)應(yīng)用與多頁(yè)應(yīng)用配置
通過(guò)vite默認(rèn)生成的就是一個(gè)單頁(yè)面應(yīng)用的配置，但是如何配置一個(gè)多頁(yè)面應(yīng)用的?這個(gè)確實(shí)值得去琢磨一下，以如下的目錄結(jié)構(gòu)為例，如何進(jìn)行配置呢?
vite-project
├─ .env
├─ .gitignore
├─ README.md
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
│ └─ favicon.ico
├─ src
│ ├─ page1
│ │ ├─ index.html
│ │ └─ src
│ │ ├─ App.vue
│ │ ├─ assets
│ │ │ └─ logo.png
│ │ ├─ components
│ │ │ └─ HelloWorld.vue
│ │ └─ main.js
│ └─ page2
│ ├─ index.html
│ └─ src
│ ├─ App.vue
│ ├─ assets
│ │ └─ logo.png
│ ├─ components
│ │ └─ HelloWorld.vue
│ └─ main.js
└─ vite.config.js
針對(duì)如上的頁(yè)面結(jié)構(gòu)應(yīng)該如何配置呢?讓我們一起來(lái)瞧一瞧。
export default defineConfig({
plugins: [vue()],
root: './src',
build: {
rollupOptions: {
input: {
page1: path.resolve(__dirname, './src/page1/index.html'),
page2: path.resolve(__dirname, './src/page2/index.html')
}
}
}
});
網(wǎng)頁(yè)題目：好記性不如爛筆頭之Vite篇
本文來(lái)源：http://www.5511xx.com/article/dhsijcj.html
