基於 Vue-cli 3x的項目部署

以前在vue項目發佈部署過程當中，把流程梳理下來，作個小分享。

項目中涉及使用了 vue-cli 3x腳手架、自動化部署工具jenkins、nginx等。

作這個分享目的也是想幫不清晰部署的前端小夥伴們 👬 作個簡單的梳理。

首先咱們先講下 Vue-cli 的配置。

Vue-cli

• package.json的配置

"scripts": {
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build",
    "build_development": "vue-cli-service build --mode development",
    "build_test": "vue-cli-service build --mode test",
    "build_preproduction": "vue-cli-service build --mode preproduction",
    "build_production": "vue-cli-service build --mode production",
    "unit": "jest --config src/test/unit/jest.conf.js --coverage",
  },
複製代碼

本地開發環境中咱們使用 npm run serve，可是當咱們要部署到線上時，就須要使用npm run build,在生產環境、測試環境生成代碼及靜態資源等。

舉個例子：咱們看到 生產環境模式 build_production 與 測試環境模式 build_test 的區別就是後面中的 「 -- mode 」

• mode的配置

在產品開發過程當中，通常須要通過本地開發、測試腳本、測試環境、預上線環境，最後才能到生產環境發佈，每一個環境也存在不一樣的配置，好比接口地址、基礎配置等等，這個時候就須要咱們配置不一樣的參數，這個時候就須要用到 mode 來指定咱們使用的模式，來管理環境變量

項目目錄中會經過添加.env文件增長後綴來設置某個模式下特有的環境變量,不一樣環境模式結尾的文件來匹配執行mode時所要映射的文件，如上圖所示 🏆

簡單的理解就是 你執行npm run build_test時，設置的環境變量就是從.env.test 中獲取，建立也是依照.env.[mode]來命名

• env文件寫法

咱們看下env文件的配置如何編寫

NODE_ENV = 'test'
VUE_APP_URL = http://test.com/gateway/api
複製代碼

可在env文件中配置api請求路徑，環境參數，基本配置等等

• env中環境變量的使用

1. src目錄中，必須以VUE_APP_開頭。調用方式爲 process.env.VUE_APP_SECRET

2. index中的使用  如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
複製代碼

Jenkins

主要分享下jenkins上的配置

• Source Code Management

首先是代碼倉庫的配置

• Build Triggers

選擇build的觸發模式，默認是手動觸發，支持代碼觸發構建和定時構建

• build 命令

選擇執行的腳本命令

• Post-build Actions

主要是用於多節點時須要遠程，用於集羣部署 可添加多臺機器遠程訪問，將build後打包的資源上傳到多個節點更新資源

以上是jenkins上前端項目的配置部署 🚀