摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。

作者：gauseen

0. 關于 Vuejs

簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。

生態系統

1. 開發規范

JavaScript Standard

Vue 編碼風格規范

項目目錄規范

2. 創建項目

# 安裝 vue cli
yarn global add @vue/cli

# 初始化項目
vue create hello-world-3x

cd hello-world-3x

# 本地運行項目
yarn serve

3. 靜態資源

靜態資源可以通過兩種方式進行處理：

在 JavaScript 被導入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。

放置在 public 目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過 webpack 的處理。

URL 轉換規則

如果 URL 是一個絕對路徑 (例如 /images/foo.png)，它將會被保留不變。

如果 URL 以 . 開頭，它會作為一個相對模塊請求被解釋且基于你的文件系統中的目錄結構進行解析。

如果 URL 以 ~ 開頭，其后的任何內容都會作為一個模塊請求被解析。這意味著你甚至可以引用 Node 模塊中的資源：

如果 URL 以 @ 開頭，它也會作為一個模塊請求被解析。它的用處在于 Vue CLI 默認會設置一個指向 /src 的別名 @

4. public 文件夾

任何放置在 public 文件夾的靜態資源都會被復制到 outputDir 對應值的目錄下（默認 "dist"）。

如果用絕對路徑來引用，不會被 webpack 處理(資源只存在 1 份)；

如果用相對路徑來引用，會被 webpack 處理，將圖片重新打包到 //img/ 目錄下，并給圖片加 hash 值，以便更好的控制緩存。資源會存在 2 份(還有第一條復制的 1 份)

所以引用 public 文件夾的靜態資源建議使用絕對路徑，注意配置路徑 publicPath 前綴

data () {
  return {
    publicPath: process.env.BASE_URL,
  }
},

5. vue.config.js

注：有些 webpack 選項是基于 vue.config.js 中的值設置的，所以不能直接修改。如：你應該修改 vue.config.js 中的 publicPath 選項而不是修改 output.publicPath

publicPath(同 baseUrl, vue cli 3.3 棄用)

作用：設置所有經過 webpack 處理的靜態資源路徑前綴（不包括用絕對路徑引用的資源）

默認："/"

默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，如：https://domain.com，publicPath 不需要刻意設置。
如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑，如：https://domain.com/my-app/，那么 publicPath 為 /my-app/。

webpack 配置
vue cli 內部配置，是通過 webpack-chain 維護的，使 webpack 的配置在后期修改起來更方便、簡單。

對于 CSS 相關 loader 來說，我們推薦使用 css.loaderOptions 而不是直接鏈式指定 loader。這是因為每種 CSS 文件類型都有多個規則，而 css.loaderOptions 可以確保你通過一個地方影響所有的規則

// vue.config.js

// CSS loader 相關配置
css: {
  loaderOptions: {
    stylus: {},
  },
},

// webpack 其它配置
chainWebpack: config => {
    // 配置別名
    config.resolve.alias
      .set("rootDir", path.join(__dirname))
    config.module
    // 添加一個具名規則 方便后期修改
      .rule("compile")
        .test(/.js$/)
        .include
          .add("src")
          .end()
        // 甚至可以創建具名 loader，方便后期修改
        .use("babel")
        .loader("babel-loader")
        .options({
          presets: [
            ["@babel/preset-env", { modules: false }]
          ]
        })

    // 修改具名 loader
    config.module
      .rule("compile")
        .use("babel")
          .tap(options => newOptions)

6. webpack 配置檢查

vue inspect > output.js # 輸出開發模式下 webpack 配置信息
vue inspect --mode production > output.js # 輸出生產模式下 webpack 配置信息

7. 支持多環境模式打包

場景：有 development、test、preview、production 多種線上環境，每個環境用到的變量值都不同，該怎么用程序解決？

vue-cli 3.x 支持多種環境模式變量配置

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

環境變量優先級：環境變量的文件名 . 越多優先級越高。如：.env.production > .env

默認情況下 vue-cli 3.x 只支持 3 種模式，分別為:

development 模式用于 vue-cli-service serve

production 模式用于 vue-cli-service build

test 模式用于 vue-cli-service test:unit 和 vue-cli-service test:e2e

那如何新加模式呢？

可以通過傳遞 --mode 選項參數為命令行 vue-cli-service 指定具體環境模式。如：新加 preview 模式

項目根目錄新增 .env.preview 文件，因為每個模式默認都會將 NODE_ENV 的值設置為模式的名稱，所以要添加 NODE_ENV=production 變量(preview 模式也是需要打包上傳服務器的)。

package.json scripts 文件新增腳本命令

"build:preview": "vue-cli-service build --mode preview"

運行 yarn build:preview 打包編譯即可

8. mock 數據之 api 接口管理工具

前后端分離式開發已經很常見了，為了前后端并行開發，mock 數據(造假數據) 已經是個不可避免的問題。 對前端來說 mock 數據的方式有很多種：

Mock.js 模擬數據生成器

需要前端手動去寫 mock 數據代碼，比較麻煩

每個項目都要有一套 mock 代碼，復用率底

沒有 GUI 可視化界面，不方便后端開發查看接口、字段等 api 信息

easy-mock 是一個可視化，并且能快速生成模擬數據的持久化服務

支持可視化界面

支持協同編輯

支持 swagger，可基于 swagger 快速創建項目接口

支持 Mock.js 語法

支持接口預覽，等等

免費開源，私有化部署簡單

RAP 和 RAP2 阿里媽媽出品，開源接口管理工具 RAP 第一代和二代

支持可視化界面

支持協同編輯

支持 Mock.js 語法

不支持 swagger 數據導入，但支持 JSON 格式數據的導入導出

免費開源，但私有化部署相對繁瑣

YApi 是一個可本地部署的、打通前后端及 QA 的、可視化的接口管理平臺

支持可視化界面

支持協同編輯

支持自動化測試, 對 Response 斷言

基于 Json5 和 Mockjs 定義接口返回數據的結構和文檔

支持 swagger、postman、json、har 數據導入

免費開源，私有化部署簡單

9. vue 項目中使用 api 接口管理平臺

// vue.config.js

// 基礎地址
const baseApi = "/api"
// YApi 項目 ID (YApi 創建項目所得)
const mockProjectId = "66666"

module.exports = {
  // 代理
  devServer: {
    proxy: {
      // 開發環境代理
      [`${baseApi}/(?!mock)`]: {
        target: process.env.VUE_APP_DOMAIN || "http://test.domain.com", // 測試環境
        changeOrigin: true,
      },
      // mock 數據代理
      [`${baseApi}/mock`]: {
        target: "http://yapi.demo.qunar.com",
        changeOrigin: true,
        pathRewrite: {
          [`${baseApi}/mock`]: `/mock/${mockProjectId}${baseApi}`,
        },
      },
    },
  },
}

10. 本地預覽打包代碼

http-server 是一個基于 node，零配置命令行 http 服務器。

# 安裝
yarn add -D http-server

# 配置 package.json scripts
"scripts": {
  "preview": "http-server ./ -P",
},

# 打包產出
yarn build

# 修改文件名 dist/ ===> my-app/(與 publicPath 保持一致)
mv -rf dist/ my-app/

# 本地預覽(http://ip:port 可選, 為代理服務)
yarn preview 

# 瀏覽器打開連接訪問即可

11. 線上部署

這里主要講述前后端分離式線上部署

當前應用路由模式分2種，hash 和 history 模式

hash 模式

樣式比較丑，不太符合人的 “審美”

瀏覽器地址欄 URL 有 # (如：http://localhost:3000/#/a)

# 后面的內容不會傳給服務端

改變瀏覽器地址欄 URL # 后面的值，不會引起網頁重載

history 模式

HTML5 新特性，樣式比較優雅

瀏覽器地址沒有 # (如：http://localhost:3000/a)

沒有 # ，所有 domain 后面的內容都會傳給服務端

改變瀏覽器地址欄 URL 會網頁重載，再次請求服務器，并向 history 棧中插入一條記錄

具體區別看這里

web 服務器

前端頁面需要跑在 web 服務器里面，主要包括 Nginx，Apache，IIS 等，主要處理一些靜態資源。我們公司使用 Nginx，下面介紹前端應用部署時 Nginx 的一些配置：

hash 模式配置

location ^~ /pos2/
{
  root /data/www/webproject;
  index  index.html index.htm;
}

history 模式配置

location ^~ /crmwap/
{
  root /data/www/webproject;
  try_files $uri $uri/ /crmwap/index.html =404;

  # 已知: $document_root = root = /data/www/webproject

  # 若: try_files $uri $uri/ /crmwap/index.html =404; fall back 如下:
  # $document_root$uri --> $document_root$uri/ -->  $document_root/crmwap/index.html --> nginx 404

  # 若：try_files $uri $uri/ /crmwap/index.html; fall back 如下:
  # $document_root$uri --> $document_root$uri/ --> http://domain.com/crmwap/index.html
}

Nginx 常用命令

# 啟動
start nginx

# 重啟
nginx -s reload

# 關閉
nginx -s stop

注：try_files 的最后一個位置（fall back）是特殊的（僅限 root），它會發出一個內部 “子請求” 而非直接在文件系統里查找這個文件。
在不更改 Nginx 配置文件的情況下，前端頁面迭代發布，不需要重啟 Nginx 服務。

12. 自動化構建工具

Jenkins

歡迎關注公眾號: 學前端