Vue-項目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

做者：gauseen

0. 關於 Vuejs

• 簡介：Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架，易用、靈活、高效。
• 生態系統

項目	介紹
awesome-vue	Vue.js 相關很棒的工具集
vue-router	Vue.js 官方的路由管理器
vuex	Vue.js 應用的狀態管理工具
vue-cli	一鍵式快速構建 Vue.js 應用開發環境
vue-loader	webpack 的 loader，解析 .vue 文件，它容許你以一種名爲單文件組件 (SFCs)的格式撰寫 Vue 組件
vue-server-renderer	服務端渲染(ssr)
vue-rx	集成 RxJS (處理事件的工具)
vue-devtools	Vue.js 開發調試工具瀏覽器插件

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 默認會設置一個指向 <projectRoot>/src 的別名 @

4. public 文件夾

• 任何放置在 public 文件夾的靜態資源都會被複制到 outputDir 對應值的目錄下（默認 'dist'）。
• 若是用絕對路徑來引用，不會被 webpack 處理(資源只存在 1 份)；
• 若是用相對路徑來引用，會被 webpack 處理，將圖片從新打包到 <outputDir>/<assetsDir>/img/ 目錄下，並給圖片加 hash 值，以便更好的控制緩存。資源會存在 2 份(還有第一條複製的 1 份)
• 因此引用 public 文件夾的靜態資源建議使用絕對路徑，注意配置路徑 publicPath 前綴

<img :src="`${publicPath}logo.png`">

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

5. vue.config.js

<font style="color: #ff9966;">
注：有些 webpack 選項是基於 vue.config.js 中的值設置的，因此不能直接修改。如：你應該修改 vue.config.js 中的 publicPath 選項而不是修改 output.publicPath
</font>

• 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 <http://ip:port>

# 瀏覽器打開鏈接訪問便可

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

歡迎關注公衆號: 學前端