一、什么是Vue打包工具(構(gòu)建工具)

在學(xué)習(xí)之前請(qǐng)確保你已經(jīng)安裝了node.js,且你的node.js版本在20以上。

比如我們的代碼有ES6高級(jí)語(yǔ)法，TS語(yǔ)法，Less語(yǔ)法，Sass語(yǔ)法。這些直接在瀏覽器中跑，瀏覽器不認(rèn)識(shí)。我們的以前的解決辦法就是通過(guò)插件(Less)或者包(TS)把這些語(yǔ)法轉(zhuǎn)為JS語(yǔ)法解決瀏覽器不認(rèn)識(shí)這些語(yǔ)法的問(wèn)題。

比如：我們的使用TS,Less一起開(kāi)發(fā)開(kāi)發(fā)，Less通過(guò)Easy Less插件生成對(duì)應(yīng)css樣式，Ts通過(guò)安裝ts-node包執(zhí)行tsc --init 指令會(huì)生成對(duì)應(yīng)js語(yǔ)法，然后我們需要把生成的js文件和css文件整和到html中進(jìn)行使用。這太麻煩有沒(méi)有一種方式我們只需要下載對(duì)應(yīng)的包，然后直接幫我們生成html+Css+JS的工具呢。

答案當(dāng)然是有的：Vue打包工具(Webpack,Vite)。

二、Webpack和vue-cli

一般Vue2項(xiàng)目常用Webpack作為打包工具,vue-cli作為其腳手架。成熟穩(wěn)定，適合復(fù)雜場(chǎng)景，兼容Vue3

下面使用vue-cli創(chuàng)建Webpack項(xiàng)目

2.1 全局安裝腳手架

使用npm安裝

# 不加版本號(hào)時(shí)默認(rèn)會(huì)安裝最新穩(wěn)定版本
??npm install -g @vue/cli

# 安裝 Vue CLI 3.x 及以上版本
npm install -g @vue/cli@5.0.8  # 示例

# 安裝 Vue CLI 2.x 版本（如 2.9.6）
npm install -g vue-cli@2.9.6    # 注意包名區(qū)別

卸載

npm uninstall -g @vue/cli  # 卸載 Vue CLI 3.x+  
npm uninstall -g vue-cli   # 卸載 Vue CLI 2.x（舊版） [3,6](@ref)

查看vue-cli腳手架版本

vue --version
# 輸出結(jié)果：@vue/cli 5.0.8

注意 不同版本的腳手架創(chuàng)建的項(xiàng)目目錄可能不一樣。可指定vue-cli腳手架版本之后，再去創(chuàng)建。

2.2 創(chuàng)建項(xiàng)目

2.2.1 指定目錄創(chuàng)建項(xiàng)目

基于 vue-cli 快速生成工程化的 Vue 項(xiàng)目：vue create 項(xiàng)目的名稱(chēng)

注意：我是基礎(chǔ)vue-cli腳手架為5.0.8創(chuàng)建的,你最好也是安裝5.0.8 否則和我的安裝步驟可能不一樣。

• 第一步，打開(kāi)你要?jiǎng)?chuàng)建的目錄，比如打開(kāi)day3_code文件夾
• 第二步，在文件上方搜索欄輸入cmd 回車(chē)

2.2.2 選擇自定安裝

• 第三步 選擇要安裝哪些東西。

vue create demo-first 
// 使用上下箭頭改變下面三個(gè)選項(xiàng)  回車(chē)表示選中
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)  //這個(gè)是安裝Vue 3
  Default ([Vue 2] babel, eslint)  //這個(gè)是安裝Vue 2
> Manually select features         //這個(gè)是手動(dòng)選擇你要安裝那個(gè)功能，一般選這個(gè)

2.2.3 選擇你要安裝的功能

上下箭頭代表移動(dòng)，空格代表選中，回車(chē)代表繼續(xù)。

這里選中Babel 和CSS Pre-processors就行。

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel   //這是解決js兼容性，必須安裝                
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support  // 漸進(jìn)式的web
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors  //CSS預(yù)處理器  按下空格鍵前面小括號(hào)有個(gè)星號(hào)代表選中安裝
 ( ) Linter / Formatter  // 先不選 這個(gè)是約束團(tuán)隊(duì)寫(xiě)代碼的風(fēng)格。如果不是規(guī)定風(fēng)格就會(huì)報(bào)錯(cuò)
 ( ) Unit Testing
 ( ) E2E Testing

選項(xiàng)功能詳解??

Babel??

• ??作用??：將 ES6+ 語(yǔ)法轉(zhuǎn)換為瀏覽器兼容的 ES5 代碼，支持現(xiàn)代 JavaScript 特性（如箭頭函數(shù)、解構(gòu)賦值）。
• ??適用場(chǎng)景??：需兼容舊瀏覽器（如 IE11）或使用實(shí)驗(yàn)性 JS 語(yǔ)法時(shí)必選。
• ??默認(rèn)啟用??：Vue CLI 預(yù)設(shè)模板已勾選。

??TypeScript??

• ??作用??：集成 TypeScript 支持，提供靜態(tài)類(lèi)型檢查和增強(qiáng)代碼可維護(hù)性。
• ??啟用后配置??：需選擇是否使用類(lèi)風(fēng)格組件語(yǔ)法、是否與 Babel 共存（推薦共存以支持 JSX 轉(zhuǎn)譯）。
• ??適用場(chǎng)景??：中大型項(xiàng)目或團(tuán)隊(duì)協(xié)作開(kāi)發(fā)。

??Progressive Web App (PWA) Support??

• ??作用??：添加離線(xiàn)緩存、推送通知等 PWA 特性，提升 Web 應(yīng)用原生體驗(yàn)。
• ??啟用后配置??：自動(dòng)生成 service-worker.js和 Web App Manifest 文件。
• ??適用場(chǎng)景??：需離線(xiàn)訪問(wèn)或安裝到用戶(hù)設(shè)備的應(yīng)用（如移動(dòng)端網(wǎng)頁(yè)）。

??Router??

• ??作用??：集成 Vue Router 庫(kù)，實(shí)現(xiàn)單頁(yè)應(yīng)用（SPA）的路由管理。
• ??啟用后配置??：選擇是否使用 History 模式（需服務(wù)器支持，否則默認(rèn) Hash 模式）。
• ??適用場(chǎng)景??：多頁(yè)面跳轉(zhuǎn)或需動(dòng)態(tài)路由的項(xiàng)目。

Vuex??

• ??作用??：集成 Vuex 狀態(tài)管理庫(kù)，實(shí)現(xiàn)跨組件數(shù)據(jù)共享與響應(yīng)式更新。
• ??適用場(chǎng)景??：復(fù)雜狀態(tài)交互（如用戶(hù)登錄狀態(tài)全局管理）。

??CSS Pre-processors??

• ??作用??：支持 Sass/SCSS、Less 或 Stylus 等 CSS 預(yù)處理器，增強(qiáng)樣式編寫(xiě)效率。
• ??啟用后配置??：選擇具體預(yù)處理器（推薦 Sass/SCSS with dart-sass）。
• ??適用場(chǎng)景??：需嵌套語(yǔ)法、變量或 Mixin 等高級(jí)樣式功能。

??Linter / Formatter??

• ??作用??：集成代碼規(guī)范工具（默認(rèn) ESLint），強(qiáng)制統(tǒng)一代碼風(fēng)格并自動(dòng)格式化。
• ??啟用后配置??：
• 選擇校驗(yàn)規(guī)則（如 ESLint + Prettier兼顧錯(cuò)誤檢查與自動(dòng)格式化）。
• 選擇觸發(fā)時(shí)機(jī)（Lint on save保存時(shí)檢查 / Lint and fix on commit提交時(shí)修復(fù)）。
• ??適用場(chǎng)景??：團(tuán)隊(duì)協(xié)作或需代碼質(zhì)量管控的項(xiàng)目（??強(qiáng)烈建議啟用??）。

??Unit Testing??

• ??作用??：集成單元測(cè)試框架（默認(rèn) Jest 或 Mocha），驗(yàn)證組件/函數(shù)邏輯正確性。
• ??啟用后配置??：選擇測(cè)試框架（Vue CLI 推薦 Jest）。
• ??適用場(chǎng)景??：需高可靠性的核心功能模塊。

??E2E Testing??

• ??作用??：集成端到端測(cè)試工具（如 Cypress），模擬用戶(hù)操作驗(yàn)證完整業(yè)務(wù)流程。
• ??適用場(chǎng)景??：關(guān)鍵路徑測(cè)試（如用戶(hù)注冊(cè)、支付流程）。

2.2.4 選擇安裝vue的版本

選擇2.x版本

? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

2.2.5 選擇css預(yù)處理器

下面全是css預(yù)處理器，選擇sass即可

Vue CLI v5.0.8
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

2.2.6 選擇配置文件的存儲(chǔ)位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 選這個(gè)獨(dú)立配置
  In package.json

??In dedicated config files（獨(dú)立的配置文件）??

??含義??：為每個(gè)工具（Babel、ESlint 等）創(chuàng)建單獨(dú)的配置文件，例如：

• Babel → babel.config.js或 .babelrc
• ESLint → .eslintrc.js或 .eslintrc.json

??特點(diǎn)??：

• ??清晰分離??：每個(gè)工具的配置獨(dú)立存放，結(jié)構(gòu)清晰，便于維護(hù)。
• ??功能完整??：支持更復(fù)雜的配置（如條件判斷、動(dòng)態(tài)導(dǎo)入），適合中大型項(xiàng)目。
• ??工具兼容性??：部分工具（如編輯器插件）默認(rèn)優(yōu)先讀取獨(dú)立配置文件。

??In package.json（集成到 package.json）??

??含義??：將配置直接寫(xiě)入 package.json文件的特定字段中，例如：

• Babel → package.json中的 babel字段
• ESLint → package.json中的 eslintConfig字段

??特點(diǎn)??：

• ??集中管理??：所有配置集中在 package.json，減少文件數(shù)量，適合小型項(xiàng)目。
• ??簡(jiǎn)化結(jié)構(gòu)??：避免項(xiàng)目根目錄被大量配置文件占據(jù)，保持簡(jiǎn)潔。

2.2.7 是否保存上面選項(xiàng)

如果我們保存就說(shuō)明下一次還是和上面一樣的選擇就可以直接創(chuàng)建不需要在選擇了。這里選擇N

? Save this as a preset for future projects? (y/N)

可以在C:\Users\86184\.vuerc查看你的預(yù)設(shè)。如果不想要可以刪除這個(gè)

2.2.8總結(jié)

2.3 運(yùn)行??

• 第四步：使用VSCode或者Trae CN打開(kāi)項(xiàng)目。不同版本Vue-Cli創(chuàng)建的目錄可能不同但是大概都是一樣的。

打開(kāi)vscode的終端，執(zhí)行一下指令

npm run serve   # 啟動(dòng)開(kāi)發(fā)服務(wù)器（基于 webpack-dev-server）

2.4 打包

打包前在 vue.config.js中添加 publicPath: ‘./’，強(qiáng)制資源使用相對(duì)路徑：

// vue.config.js
module.exports = {
  publicPath: './' // 關(guān)鍵配置
}

打開(kāi)終端執(zhí)行一下命令

npm run build   # 生產(chǎn)環(huán)境打包（輸出到 dist/ 目錄）

多了一個(gè)dist文件夾，這就是打包之后的東西。

我們雙擊index.html就可以運(yùn)行了。

三、Vite和create-vue

一般Vue3項(xiàng)目常用Vite作為打包工具,create-vue作為其腳手架。開(kāi)發(fā)體驗(yàn)快如閃電，配置更輕量，可兼容Vue2項(xiàng)目

下面使用create-vue創(chuàng)建Vite項(xiàng)目

3.1 一鍵創(chuàng)建項(xiàng)目??（無(wú)需全局安裝）

3.1.1 指定目錄創(chuàng)建項(xiàng)目

基于 vue-cli 快速生成工程化的 Vue 項(xiàng)目：vue create 項(xiàng)目的名稱(chēng)

• 第一步，打開(kāi)你要?jiǎng)?chuàng)建的目錄，比如打開(kāi)day3_code文件夾
• 第二步，在文件上方搜索欄輸入cmd 回車(chē)

3.1.2執(zhí)行指令

我使用的vite的7.0.6版本。

使用的create-vue腳手架版本是3.18.0。

可以通過(guò)指令npm view create-vue versions 查看create-vue腳手架有哪些版本

npm create vue # 等價(jià)于npm create vue@latest 顯式指定最新版本
npm create vue@3.8.0 # @3.8.0明確指向的是 create-vue腳手架工具自身的版本

3.1.3 輸入項(xiàng)目名稱(chēng)

3.1.4選擇功能

*  請(qǐng)選擇要包含的功能： (↑/↓ 切換，空格選擇，a 全選，回車(chē)確認(rèn))
|  [ ] TypeScript
|  [ ] JSX 支持
|  [+] Router（單頁(yè)面應(yīng)用開(kāi)發(fā)）
|  [ ] Pinia（狀態(tài)管理）
|  [ ] Vitest（單元測(cè)試）
|  [ ] 端到端測(cè)試
|  [ ] ESLint（錯(cuò)誤預(yù)防）
|  [ ] Prettier（代碼格式化）

JSX 支持??

• ??作用??：允許在 Vue 組件中使用 JSX 語(yǔ)法（類(lèi) React 的 JavaScript 語(yǔ)法擴(kuò)展）。
• ????適用場(chǎng)景??：??需要高度動(dòng)態(tài)的模板邏輯（如復(fù)雜條件渲染）。??團(tuán)隊(duì)有 React 開(kāi)發(fā)背景，習(xí)慣 JSX 風(fēng)格。????注意??：Vue 默認(rèn)推薦模板語(yǔ)法，JSX 需手動(dòng)配置 Babel 插件。

??TypeScript??

• ????作用??：集成 TypeScript 靜態(tài)類(lèi)型檢查，提升代碼健壯性。
• ????推薦場(chǎng)景??：??中大型項(xiàng)目、團(tuán)隊(duì)協(xié)作開(kāi)發(fā)。??需要嚴(yán)格類(lèi)型約束的公共組件庫(kù)。
• ????成本??：需學(xué)習(xí) TS 語(yǔ)法，增加初期配置復(fù)雜度。

Router（單頁(yè)面應(yīng)用開(kāi)發(fā)）??

• ????作用??：集成 Vue Router，實(shí)現(xiàn) SPA 路由管理（動(dòng)態(tài)路由、導(dǎo)航守衛(wèi)等）。
• ????必選場(chǎng)景??：??多頁(yè)面應(yīng)用（如后臺(tái)管理系統(tǒng)、電商網(wǎng)站）。??需實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)、路由懶加載等功能。????替代方案??：若項(xiàng)目?jī)H單頁(yè)可跳過(guò)（如純展示頁(yè)）。

??Pinia（狀態(tài)管理）??

• ????作用??：輕量級(jí)狀態(tài)管理庫(kù)（替代 Vuex），支持響應(yīng)式數(shù)據(jù)共享。
• ????推薦場(chǎng)景??：??跨組件狀態(tài)共享（如用戶(hù)登錄信息、全局主題）。??復(fù)雜數(shù)據(jù)流管理（如購(gòu)物車(chē)、實(shí)時(shí)數(shù)據(jù)看板）。
• ????注意??：小型項(xiàng)目（無(wú)共享狀態(tài)需求）可不選。

??Vitest（單元測(cè)試）??

• ????作用??：基于 Vite 的極速單元測(cè)試框架（兼容 Jest API）。
• ????推薦場(chǎng)景??：??核心工具函數(shù)/組件邏輯需高覆蓋率驗(yàn)證。??開(kāi)源項(xiàng)目或企業(yè)級(jí)應(yīng)用。
• ????成本??：需編寫(xiě)測(cè)試用例，增加開(kāi)發(fā)時(shí)間。

??端到端測(cè)試??

• ????作用??：集成 Cypress 或 Playwright，模擬用戶(hù)操作驗(yàn)證全流程。
• ????適用場(chǎng)景??：??關(guān)鍵業(yè)務(wù)流程測(cè)試（如用戶(hù)注冊(cè)、支付流程）。??對(duì)穩(wěn)定性要求極高的生產(chǎn)系統(tǒng)。
• ??成本??：配置復(fù)雜，適合中后期項(xiàng)目追加。

ESLint（錯(cuò)誤預(yù)防）??

• ????作用??：代碼質(zhì)量檢查（如變量未使用、隱式類(lèi)型轉(zhuǎn)換）。
• ????強(qiáng)烈推薦??：所有項(xiàng)目均應(yīng)啟用，避免低級(jí)錯(cuò)誤。
• ????典型規(guī)則??：no-unused-vars, no-console。

??Prettier（代碼格式化）??

• ????作用??：自動(dòng)格式化代碼（縮進(jìn)、引號(hào)、分號(hào)等），統(tǒng)一團(tuán)隊(duì)風(fēng)格。
• ????推薦組合??：??與 ESLint 搭配使用（選 ESLint + Prettier配置）。??避免手動(dòng)調(diào)整代碼格式?jīng)_突。

3.1.5 選擇試驗(yàn)

截止到2025年8.11日 尤玉溪團(tuán)隊(duì)剛剛推出他們公司(voidzero)新推出的技術(shù)Oxlint和Rolldown-Vite。

這里可以不選直接回車(chē)。

• Oxlint：極速代碼檢查（替代 ESLint）快 50–100 倍
• ??Rolldown-Vite?：極速生產(chǎn)構(gòu)建（替代 Rollup）快 3–16 倍

??3.2 安裝依賴(lài)與啟動(dòng)??

剩下的這些就是上面的vue2的一樣了。

cd my-vite-project
npm install
npm run dev  # 冷啟動(dòng) <1 秒（原生 ESM 按需加載）
npm run build  # 生產(chǎn)構(gòu)建（Rollup 優(yōu)化，輸出 dist/）

四、總結(jié)

• Webpack 使用的腳手架是vue-cli 需要全局安裝。
• Vite 使用的腳手架是create-vue 不需要全局安裝。

這兩個(gè)工程化開(kāi)發(fā)首選Vite，因?yàn)関ite??按需編譯??速度快。

未來(lái)趨勢(shì)已明顯傾向于 Vite 為核心的 create-vue。

大家想要自己從0-1搭建Webpack，請(qǐng)看我發(fā)的文章：從0-1搭建webpack的前端工程化項(xiàng)目

學(xué)習(xí)了Webpack從0-1的構(gòu)建可以類(lèi)比Vite

其實(shí)這一塊從0-1的構(gòu)建可以學(xué)也可以不學(xué)，只要會(huì)用就行。學(xué)完這個(gè)有助于你更加深刻的理解底層原理。

現(xiàn)在2024年10月份尤雨溪?jiǎng)?chuàng)建了公司voidZero，這個(gè)公司旨在解決前端開(kāi)發(fā)中的碎片化和配置復(fù)雜以及性能問(wèn)題。VoidZero的技術(shù)布局是分為底層工具鏈(Oxc_parser、oxLint、OxcFormatter等等)和上層應(yīng)用工具(RollDown打包工具用于替代esbuild)。預(yù)計(jì)2025年下半年可以提供給用戶(hù)使用。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論