摘要：放置在目錄下或通過絕對路徑被引用。對于相關(guān)來說，我們推薦使用而不是直接鏈?zhǔn)街付āＴ诓桓呐渲梦募那闆r下，前端頁面迭代發(fā)布，不需要重啟服務(wù)。

作者：gauseen

0. 關(guān)于 Vuejs

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

生態(tài)系統(tǒng)

1. 開發(fā)規(guī)范

JavaScript Standard

Vue 編碼風(fēng)格規(guī)范

項(xiàng)目目錄規(guī)范

2. 創(chuàng)建項(xiàng)目

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

# 初始化項(xiàng)目
vue create hello-world-3x

cd hello-world-3x

# 本地運(yùn)行項(xiàng)目
yarn serve

3. 靜態(tài)資源

靜態(tài)資源可以通過兩種方式進(jìn)行處理：

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

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

URL 轉(zhuǎn)換規(guī)則

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

如果 URL 以 . 開頭，它會作為一個相對模塊請求被解釋且基于你的文件系統(tǒng)中的目錄結(jié)構(gòu)進(jìn)行解析。

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

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

4. public 文件夾

任何放置在 public 文件夾的靜態(tài)資源都會被復(fù)制到 outputDir 對應(yīng)值的目錄下（默認(rèn) "dist"）。

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

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

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

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

5. vue.config.js

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

publicPath(同 baseUrl, vue cli 3.3 棄用)

作用：設(shè)置所有經(jīng)過 webpack 處理的靜態(tài)資源路徑前綴（不包括用絕對路徑引用的資源）

默認(rèn)："/"

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

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

對于 CSS 相關(guān) loader 來說，我們推薦使用 css.loaderOptions 而不是直接鏈?zhǔn)街付?loader。這是因?yàn)槊糠N CSS 文件類型都有多個規(guī)則，而 css.loaderOptions 可以確保你通過一個地方影響所有的規(guī)則

// vue.config.js

// CSS loader 相關(guān)配置
css: {
  loaderOptions: {
    stylus: {},
  },
},

// webpack 其它配置
chainWebpack: config => {
    // 配置別名
    config.resolve.alias
      .set("rootDir", path.join(__dirname))
    config.module
    // 添加一個具名規(guī)則 方便后期修改
      .rule("compile")
        .test(/.js$/)
        .include
          .add("src")
          .end()
        // 甚至可以創(chuàng)建具名 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 # 輸出開發(fā)模式下 webpack 配置信息
vue inspect --mode production > output.js # 輸出生產(chǎn)模式下 webpack 配置信息

7. 支持多環(huán)境模式打包

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

vue-cli 3.x 支持多種環(huán)境模式變量配置

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

環(huán)境變量優(yōu)先級：環(huán)境變量的文件名 . 越多優(yōu)先級越高。如：.env.production > .env

默認(rèn)情況下 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 選項(xiàng)參數(shù)為命令行 vue-cli-service 指定具體環(huán)境模式。如：新加 preview 模式

項(xiàng)目根目錄新增 .env.preview 文件，因?yàn)槊總€模式默認(rèn)都會將 NODE_ENV 的值設(shè)置為模式的名稱，所以要添加 NODE_ENV=production 變量(preview 模式也是需要打包上傳服務(wù)器的)。

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

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

運(yùn)行 yarn build:preview 打包編譯即可

8. mock 數(shù)據(jù)之 api 接口管理工具

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

Mock.js 模擬數(shù)據(jù)生成器

需要前端手動去寫 mock 數(shù)據(jù)代碼，比較麻煩

每個項(xiàng)目都要有一套 mock 代碼，復(fù)用率底

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

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

支持可視化界面

支持協(xié)同編輯

支持 swagger，可基于 swagger 快速創(chuàng)建項(xiàng)目接口

支持 Mock.js 語法

支持接口預(yù)覽，等等

免費(fèi)開源，私有化部署簡單

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

支持可視化界面

支持協(xié)同編輯

支持 Mock.js 語法

不支持 swagger 數(shù)據(jù)導(dǎo)入，但支持 JSON 格式數(shù)據(jù)的導(dǎo)入導(dǎo)出

免費(fèi)開源，但私有化部署相對繁瑣

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

支持可視化界面

支持協(xié)同編輯

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

基于 Json5 和 Mockjs 定義接口返回?cái)?shù)據(jù)的結(jié)構(gòu)和文檔

支持 swagger、postman、json、har 數(shù)據(jù)導(dǎo)入

免費(fèi)開源，私有化部署簡單

9. vue 項(xiàng)目中使用 api 接口管理平臺

// vue.config.js

// 基礎(chǔ)地址
const baseApi = "/api"
// YApi 項(xiàng)目 ID (YApi 創(chuàng)建項(xiàng)目所得)
const mockProjectId = "66666"

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

10. 本地預(yù)覽打包代碼

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

# 安裝
yarn add -D http-server

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

# 打包產(chǎn)出
yarn build

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

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

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

11. 線上部署

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

當(dāng)前應(yīng)用路由模式分2種，hash 和 history 模式

hash 模式

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

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

# 后面的內(nèi)容不會傳給服務(wù)端

改變?yōu)g覽器地址欄 URL # 后面的值，不會引起網(wǎng)頁重載

history 模式

HTML5 新特性，樣式比較優(yōu)雅

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

沒有 # ，所有 domain 后面的內(nèi)容都會傳給服務(wù)端

改變?yōu)g覽器地址欄 URL 會網(wǎng)頁重載，再次請求服務(wù)器，并向 history 棧中插入一條記錄

具體區(qū)別看這里

web 服務(wù)器

前端頁面需要跑在 web 服務(wù)器里面，主要包括 Nginx，Apache，IIS 等，主要處理一些靜態(tài)資源。我們公司使用 Nginx，下面介紹前端應(yīng)用部署時(shí) 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

# 關(guān)閉
nginx -s stop

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

12. 自動化構(gòu)建工具

Jenkins

歡迎關(guān)注公眾號: 學(xué)前端