Vue CLI 4與專案構建實戰指南

Amd794發表於2024-06-09

Vue

title: Vue CLI 4與專案構建實戰指南
date: 2024/6/9
updated: 2024/6/9

excerpt:
這篇文章介紹瞭如何使用Vue CLI最佳化專案構建配置，提高開發效率，涉及配置管理、專案部署策略、外掛系統定製以及Webpack和TypeScript的深度整合技巧。

categories:

前端開發

tags:

Vue CLI
最佳化構建
配置管理
專案部署
外掛系統
Webpack
TypeScript整合

第一部分：Vue CLI 4入門

第1章 Vue CLI概述

Vue CLI的作用和優勢

Vue CLI（Vue.js Command Line Interface）是官方提供的一個標準工具，用於快速搭建Vue專案架構。它具有以下作用和優勢：

標準化開發流程：Vue CLI提供了一套標準的開發流程和專案結構，有助於團隊協作和專案維護。
快速原型開發：透過Vue CLI可以快速建立專案原型，提高開發效率。
豐富的外掛生態：Vue CLI擁有豐富的外掛，可以輕鬆整合各種功能，如路由、狀態管理、打包最佳化等。
易於定製和擴充套件：Vue CLI支援對構建配置的深度定製，滿足不同專案的需求。

Vue CLI的發展歷程

Vue CLI自Vue.js誕生以來，就作為官方推薦的腳手架工具，隨著Vue.js的發展而不斷迭代。從最初的Vue CLI 2到Vue CLI 3，再到現在的Vue
CLI 4，它一直在最佳化專案結構和構建配置，提高開發效率和使用者體驗。

Vue CLI 4的主要特性

Vue CLI 4帶來了以下主要特性：

更快的構建速度：利用Webpack 4和快取最佳化，提高構建速度。
零配置：預設配置即可滿足大多數專案的需求，無需額外配置。
外掛系統：透過外掛系統，可以輕鬆整合Vue Router、Vuex等Vue生態系統中的其他工具。
圖形化介面：提供了Vue UI，一個圖形化的管理介面，用於建立和管理專案。

第2章環境準備與安裝

Node.js和npm的安裝與配置
Vue CLI 4需要Node.js環境，因此首先需要安裝Node.js。Node.js通常與npm（node package manager）一同安裝。可以從
cmdragon's Blog Node.js官網下載並安裝最新版本的Node.js。

確保安裝Node.js版本在12以上。
安裝完成後，在命令列中執行node -v和npm -v，檢查安裝是否成功。

Vue CLI 4的安裝

Vue CLI 4可以透過npm全域性安裝：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

Vue CLI 4的升級

如果需要升級Vue CLI 4到最新版本，可以使用以下命令：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

第3章建立和管理Vue專案

使用Vue CLI 4建立新專案

使用Vue CLI 4建立新專案，可以執行以下命令：

vue create project-name

在命令執行過程中，CLI會提供一系列選項，包括預設配置、Vue版本選擇、新增外掛等。

專案的目錄結構和檔案解釋

Vue CLI 4建立的專案具有以下目錄結構：

project-name/
│
├── node_modules/ # 專案依賴
├── public/        # 公共檔案，如index.html
│   └── index.html
├── src/           # 原始碼目錄
│   ├── assets/    # 靜態資源
│   ├── components/ # Vue元件
│   ├── App.vue    # 根元件
│   └── main.js    # 入口檔案
├── .gitignore     # Git忽略檔案
├── babel.config.js # Babel配置檔案
├── package.json   # 專案配置檔案
└── vue.config.js  # Vue專案配置檔案

專案的配置和管理

專案的配置主要透過vue.config.js
檔案進行。該檔案提供了對Webpack配置的細粒度控制。此外，還可以透過環境變數來控制不同環境下的專案配置。專案的管理主要包括專案的啟動、構建和測試等，這些都可以透過package.json
中的scripts欄位來配置。
AD：等你探索

第二部分：Vue CLI 4高階配置

第4章個性化專案配置

修改專案配置檔案（vue.config.js）

vue.config.js是Vue CLI專案的可選配置檔案，如果專案的構建系統和webpack配置滿足你的需求，那麼你不需要這個檔案。但如果需要自定義配置，可以透過這個檔案來修改。

例如，以下是一個簡單的vue.config.js檔案，它修改了基本的webpack配置：

module.exports = {
  // 基本路徑
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 構建時的輸出目錄
  outputDir: 'dist',
  // 放置靜態資源的目錄
  assetsDir: 'static',
  // html的輸出路徑
  indexPath: 'index.html',
  // 檔名雜湊
  filenameHashing: true,
  // eslint-loader 是否在儲存的時候檢查
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含執行時編譯器的Vue核心的構建
  runtimeCompiler: false,

  // 預設情況下 babel-loader 忽略其中的所有檔案 node_modules
  transpileDependencies: [],

  // 生產環境 sourceMap
  productionSourceMap: false,

  // 跨域設定
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null // 設定代理
  },

  // webpack配置 - 簡單配置方式
  configureWebpack: {
    // 外掛等配置
  },

  // webpack配置 - 鏈式配置方式
  chainWebpack: (config) => {
    // 鏈式配置
  }
};

連結Webpack配置（chainWebpack）

Vue CLI 4推薦使用chainWebpack方法來修改Webpack配置，這是一個鏈式呼叫方法，可以更精細地控制Webpack配置。

chainWebpack: (config) => {
  // 修改loader
  config.module
    .rule('vue')
    .use('vue-loader')
    .loader('vue-loader/lib/loader.js')
    .tap(options => {
      // 修改選項...
      return options;
    });

  // 新增外掛
  config.plugin('example').use(ExamplePlugin, [/* options */]);
}

外掛的使用和自定義

Vue CLI 4允許透過vue.config.js檔案中的plugins選項來新增自定義外掛。

const ExamplePlugin = require('example-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ExamplePlugin({
      // 外掛選項
    })
  ]
};

第5章構建最佳化

程式碼分割和懶載入

Vue CLI 4支援動態匯入，這可以讓你的應用實現程式碼分割和懶載入。
AD：享受無干擾的沉浸式閱讀之旅

// 示例：動態匯入元件
const MyComponent = () => import('./MyComponent.vue');

Tree-shaking和依賴最佳化

Webpack 4支援tree-shaking，可以幫助你去除未使用的程式碼。在vue.config.js中，可以透過配置來啟用這項功能。

module.exports = {
  // ...其他配置
  configureWebpack: {
    optimization: {
      usedExports: true,
    },
  },
};

使用CDN加速專案載入

在vue.config.js中，可以配置外部連結來使用CDN。

module.exports = {
  // ...其他配置
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      // ...其他庫
    },
  },
};

在HTML模板中，透過<script>和<link>標籤引入CDN資源。

第6章多環境配置

開發環境、測試環境和生產環境的配置

Vue CLI 4支援透過.env檔案來配置不同環境的環境變數。例如：

// .env.development
VUE_APP_API_URL=http://localhost:3000/api

// .env.production
VUE_APP_API_URL=https://production-api.com/api

在package.json中，可以定義不同的啟動和構建命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test"
  }
}

環境變數的使用

環境變數可以透過process.env在程式碼中訪問。Vue CLI會自動載入以VUE_APP_開頭的環境變數到客戶端側的程式碼中。

構建命令的定製

Vue CLI 允許你自定義構建命令，以適應不同的構建需求。你可以透過修改package.json中的scripts欄位來達到這個目的。

例如，你可能想要建立一個特定的構建命令來構建生產環境的版本，並且使用一個特定的配置檔案：

{
  "scripts": {
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode production --config vue.config.prod.js"
  }
}

在上面的例子中，build:prod命令會使用生產環境的模式 (--mode production)
並指定一個特定的配置檔案 (--config vue.config.prod.js) 來進行構建。

此外，你還可以建立自定義的啟動命令，以便在不同的開發環境中使用：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:mock": "vue-cli-service serve --mode mock --config vue.config.mock.js"
  }
}

在這裡，serve:mock命令會使用模擬資料的環境 (--mode mock) 並指定一個模擬資料的配置檔案 (--config vue.config.mock.js)
來啟動開發伺服器。

總結

Vue CLI 4 提供了強大的配置選項，允許開發者根據具體需求定製化專案配置。透過vue.config.js檔案，你可以修改 Webpack
配置、定義環境變數、使用外掛以及最佳化構建過程。同時，CLI 也支援多環境配置，使得開發者能夠更容易地管理不同環境下的專案設定。掌握這些高階配置技巧，可以幫助開發者更高效地開發和管理
Vue 專案。
AD：覆蓋廣泛主題工具可供使用

第三部分：專案構建與部署

第7章專案構建流程

7.1 構建命令的使用

在 Vue CLI 專案中，構建命令通常指的是用來編譯和打包專案檔案的命令。Vue CLI 提供了以下常用的構建命令：

vue-cli-service build：這是預設的構建命令，用於構建生產環境的程式碼。它將編譯原始碼並生成dist目錄，其中包含了壓縮後的靜態檔案。
vue-cli-service serve：這個命令用於啟動開發伺服器，通常在開發階段使用。

7.2 專案的編譯和打包

專案的編譯和打包通常指的是將.vue檔案和其他資原始檔（如 JavaScript、CSS、圖片等）轉換成瀏覽器可以理解的靜態檔案的過程。Vue
CLI 使用 Webpack 來處理這一過程，以下是編譯和打包的基本步驟：

依賴安裝：確保所有專案依賴都已正確安裝。
配置檢查：檢查vue.config.js檔案中的配置是否正確。
編譯：Webpack 開始編譯原始碼，將.vue檔案編譯成 JavaScript 程式碼，同時處理 CSS 前處理器、圖片等資源。
打包：編譯後的程式碼和資源被打包成一個或多個 bundle 檔案。
最佳化：Webpack 會進行程式碼分割、壓縮等最佳化操作。
輸出：最終生成的靜態檔案被放置在dist目錄下。

7.3 熱過載和監控

熱過載（Hot Module Replacement，HMR）是 Vue CLI 提供的一個功能，它可以在不重新整理整個頁面的情況下，透過替換更新的模組來實現實時預覽更新。使用
Vue CLI 的vue-cli-service serve命令啟動開發伺服器時，預設就開啟了熱過載功能。

監控通常指的是對構建過程的監控，Vue CLI 提供了詳細的構建日誌和進度指示，以便開發者瞭解構建過程的狀態。

第8章部署與自動化

8.1 靜態資源的部署

靜態資源的部署通常涉及到將構建後的dist目錄中的檔案上傳到伺服器或 CDN。以下是一些常見的部署方式：

FTP：使用 FTP 將檔案上傳到伺服器。
SCP：使用 SCP 命令透過 SSH 將檔案複製到伺服器。
CDN：將檔案上傳到 CDN 提供商，然後透過 CDN 分發到使用者。

8.2 CI/CD流程的整合

持續整合（CI）和持續部署（CD）是現代軟體開發的重要組成部分。整合 Vue CLI 專案到 CI/CD 流程通常涉及以下步驟：

程式碼提交：當程式碼被提交到版本控制系統時，CI 流程被觸發。
自動化測試：執行自動化測試來驗證程式碼更改。
構建：執行構建命令，生成生產環境的程式碼。
部署：將構建後的程式碼部署到生產環境或測試環境。

8.3 自動化部署指令碼編寫

自動化部署指令碼可以幫助開發者自動化部署過程。以下是一個簡單的自動化部署指令碼的示例，使用 SSH 和 SCP 命令將檔案部署到遠端伺服器：

#!/bin/bash

# 伺服器配置
SERVER_IP="123.45.67.89"
SERVER_USER="username"
SERVER_PATH="/var/www/html"

# 本地構建目錄
BUILD_PATH="./dist"

# 構建專案
npm run build

# 使用 SSH 連線到伺服器，並使用 SCP 部署檔案
scp -r $BUILD_PATH/* $SERVER_USER@$SERVER_IP:$SERVER_PATH

echo "部署完成"

這個指令碼首先定義了伺服器的 IP 地址、使用者名稱和路徑，然後構建專案，最後透過 SCP
將構建後的檔案上傳到伺服器指定目錄。在實際使用中，需要根據具體的伺服器配置和專案需求來編寫指令碼。

第9章商城專案實戰

9.1 專案需求分析和設計

在開始一個商城專案之前，需要進行詳細的需求分析和設計。以下是一些關鍵步驟：

需求收集：與客戶溝通，瞭解商城的基本功能，如商品展示、購物車、訂單管理、支付介面等。
功能規劃：根據需求確定功能模組，如使用者模組、商品模組、訂單模組等。
介面設計：設計使用者介面，包括首頁、商品列表、商品詳情、購物車頁面等。
技術選型：選擇合適的技術棧，如前端使用 Vue CLI 4，後端可能使用 Node.js、Express、MongoDB 等。
資料庫設計：設計資料庫模型，確定資料儲存結構。

9.2 使用Vue CLI 4構建專案

使用 Vue CLI 4 建立專案的基本步驟如下：

安裝 Vue CLI 4：
```
npm install -g @vue/cli
```
建立新專案：
```
vue create mall-project
```
在建立過程中，可以選擇預設配置或手動設定，包括 Vue 版本、新增的外掛等。

進入專案並新增所需依賴：

cd mall-project
npm install vue-router vuex axios --save

根據設計圖和功能規劃，編寫前端程式碼，配置路由和狀態管理。

9.3 專案構建和部署

專案開發完成後，需要構建和部署：

構建專案：
```
npm run build
```
這將生成dist目錄，包含了生產環境下的靜態檔案。
部署到伺服器或雲平臺，可以使用自動化部署指令碼或 CI/CD 工具。

第10章企業官網專案實戰

10.1 專案需求分析和設計

企業官網的專案需求分析和設計通常包括以下內容：

需求調研：瞭解企業的業務和目標受眾，確定網站需要展示的內容和資訊架構。
設計風格：根據企業的品牌形象設計網站的整體風格和佈局。
功能規劃：確定網站的功能，如公司介紹、產品展示、新聞動態、聯絡我們等頁面。
響應式設計：確保網站在不同裝置上都能良好展示。

10.2 使用Vue CLI 4構建專案

構建企業官網的步驟與商城專案類似：

使用 Vue CLI 4 建立專案。
安裝必要的依賴，如路由、狀態管理、UI 庫等。
根據設計圖實現頁面佈局和互動。

10.3 最佳化和部署

專案完成後，進行最佳化和部署：

效能最佳化：最佳化圖片、程式碼，減少HTTP請求，使用Webpack的最佳化功能等。
SEO最佳化：確保網站內容對搜尋引擎友好，提高搜尋排名。
部署：將構建後的靜態檔案部署到伺服器或雲平臺，如 Netlify、Vercel 等。
監控和維護：部署後監控網站效能，定期進行內容更新和維護。

附錄A Vue CLI 4常見問題解答

常見錯誤和解決方案

錯誤：Error: Invalid or unexpected token
- 解決方案：通常是語法錯誤，檢查程式碼中的語法，特別是 JSON 配置檔案中是否使用了錯誤的引號。
錯誤：Module not found
- 解決方案：確保已經正確安裝了所有依賴。如果問題仍然存在，嘗試刪除node_modules目錄和package-lock.json
  檔案，然後重新安裝依賴。
錯誤：Cannot find name 'xxx'
- 解決方案：檢查是否正確匯入了所需的模組或元件。

效能最佳化建議

程式碼分割：使用動態匯入（import()）實現程式碼分割，減少初始載入時間。
Tree Shaking：移除未使用的程式碼，減少最終構建的檔案大小。
圖片最佳化：使用圖片壓縮工具減小圖片檔案大小。
快取策略：合理設定 HTTP 快取頭，利用瀏覽器快取。

版本更新和遷移指南

備份：在進行版本更新前，備份當前專案。
更新 CLI：使用npm update -g @vue/cli更新 Vue CLI。
更新專案：在專案目錄中執行vue upgrade。
檢查配置：檢查專案配置檔案，確保相容新版本。

附錄B Vue CLI 4外掛列表

官方外掛介紹

@vue/cli-plugin-babel：Babel 外掛，用於轉譯 JavaScript 程式碼。
@vue/cli-plugin-eslint：ESLint 外掛，用於程式碼質量和風格檢查。
@vue/cli-plugin-router：Vue Router 外掛，用於頁面路由管理。
@vue/cli-plugin Vuex：Vuex 外掛，用於狀態管理。

第三方外掛推薦

vue-cli-plugin-element：Element UI 外掛，用於快速搭建介面。
vue-cli-plugin-i18n：國際化外掛，用於多語言支援。
vue-cli-plugin-lighthouse：Lighthouse 外掛，用於效能檢測。

外掛的安裝和使用方法

安裝外掛：

vue add plugin-name

或在vue.config.js中配置：

module.exports = {
  plugins: [
    ['plugin-name', { /* 配置選項 */ }]
  ]
}

附錄C Vue CLI 4配置參考

配置檔案的結構和示例

Vue CLI 4 專案通常包含一個vue.config.js檔案，用於配置專案：

module.exports = {
  // 基本路徑
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 構建時的輸出目錄
  outputDir: 'dist',
  // 放置靜態資源的目錄
  assetsDir: 'static',
  // html的輸出路徑
  indexPath: 'index.html',
  // 檔名雜湊
  filenameHashing: true,
  // eslint-loader 是否在儲存的時候檢查
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 是否使用包含執行時編譯器的Vue核心的構建
  runtimeCompiler: false,
  // 預設情況下 babel-loader 忽略其中的所有檔案 node_modules
  transpileDependencies: [],
  // 生產環境 sourceMap
  productionSourceMap: false,
  // 跨域設定
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null // 設定代理
  },
  // webpack配置 - 簡單配置方式
  configureWebpack: {
    // 外掛等配置
  },
  // webpack配置 - 鏈式配置方式
  chainWebpack: (config) => {
    // 鏈式配置
  },
  // PWA 外掛相關配置
  pwa: {},
  // 第三方外掛配置
  pluginOptions: {}
}

常用配置項詳解

publicPath：設定基礎路徑，用於部署到非根路徑。
outputDir：設定構建輸出目錄。
assetsDir：設定放置靜態資源的目錄。
indexPath：設定 HTML 輸出路徑。
filenameHashing：設定檔名是否包含hash，用於快取控制。
lintOnSave：設定是否在儲存時進行ESLint檢查。
devServer：設定開發伺服器相關配置。

高階配置技巧

鏈式配置：使用chainWebpack方法進行細粒度的配置。
環境變數：透過 process.env訪問環境變數，可以在vue.config.js中使用環境變數來設定不同的配置。
多環境配置
：透過設定不同的環境變數，可以實現開發環境、測試環境和生產環境的配置切換。可以在專案根目錄下建立.env.development、.env.test
和.env.production檔案，分別配置不同環境的變數。
外部配置檔案：如果配置資訊較為複雜，可以將配置抽離到外部的 JSON 或 YAML 檔案中，然後在vue.config.js中引入。
自定義外掛：如果官方外掛或第三方外掛不能滿足需求，可以開發自定義外掛。透過webpack的外掛系統，可以建立具有特定功能的外掛。
最佳化構建效能：透過配置webpack的externals選項，可以將一些大型庫如lodash或moment等排除在構建之外，減少構建時間。
快取策略：配置webpack的cache選項，可以提高構建的快取命中率，加快構建速度。
CSS 相關配置：透過css選項，可以配置 CSS 的相關處理，如提取 CSS 檔案、啟用 CSS Modules 等。

vue專案構建與實戰
2017-06-27
Vue
vue-cli構建vue專案
2018-08-07
Vue
vue-cli構建專案使用 less
2018-08-07
Vue
Vue(1):用Vue-cli構建Vue3專案
2021-05-17
Vue
vue-cli快速構建專案簡單介紹
2017-04-16
Vue
從無到有構建vue實戰專案（六）
2019-07-21
Vue
vue-cli 專案結構
2019-02-16
Vue
webpack4構建vue專案（二）
2019-04-22
WebVue
使用vue-cli3構建的vue單頁面專案seo
2019-01-09
Vue
vue-cli3構建專案跨域解決方案
2019-01-11
Vue跨域
vue-cli 構建的專案，本地手機端預覽
2018-12-21
Vue
Vue.js(一) 基於vue-cli腳手架工具構建Vue專案
2017-05-19
Vue.js
vue（16）vue-cli建立專案以及專案結構解析
2021-07-15
Vue
vue-cli構建的專案，.vue檔案修改無法熱更新的問題
2018-07-21
Vue
vue-cli#2.0專案結構分析
2016-12-21
Vue
vue-cli#4.7專案結構分析
2018-05-11
Vue
vue-cli專案結構詳解
2017-12-25
Vue
vue-cli專案升級webpack4
2019-08-09
VueWeb
搭建vue cli4專案及打包配置
2021-01-05
Vue
vue-cli3專案升級到 vue-cli4 的方法總結
2020-03-18
Vue
vue-cli腳手架專案構成
2018-02-05
Vue
node和vue-cli構建專案時安裝的常用依賴
2019-02-16
Vue
使用 .NET CLI 構建專案腳手架
2021-03-09
Vue-CLI 專案搭建
2022-04-18
Vue
vue cli 快速搭建專案
2018-04-04
Vue
專案實戰：如何構建知識圖譜
2017-09-14
使用vue-cli搭建VUE專案
2018-08-07
Vue
Webpack 4 構建大型專案實踐 / 微前端
2019-08-23
Web前端
Webpack 4 構建大型專案實踐 / 優化
2019-07-09
Web優化
小白學習Vue(11)--環境安裝及專案構建 | webstorm構建vue專案
2020-11-20
VueWebORM
《從零構建前後分離的web專案》實戰 -5分鐘快速構建炒雞規範的VUE專案骨架
2018-09-14
WebVue
vue cli4構建基於typescript的vue元件併發布到npm
2020-08-03
VueTypeScript元件NPM
關於vue-cli構建的專案在github上的預覽問題
2017-10-25
VueGithub
專案經理之專案經理與專案成員的實戰指南
2016-03-02
基於webpack4.x專案實戰3 - 手寫一個cli
2019-04-28
Web
vue-cli 實戰總結
2017-11-27
Vue
優雅配置vue專案，webpack 4.x + Vue模仿vue-cli配置 (一)
2018-07-18
VueWeb
vue cli 3.0快速建立專案
2019-03-19
Vue