vue-cli3 配置開發-測試環境

Scott 發布于2019-08-26 13:48 / 1396人閱讀

摘要：實現輸入一行命令，執行兩條指令，分別打包線上生產環境和線上測試環境的代碼。這樣配置好之后，只要執行，它會自動先執行正式環境構建打包，完成之后再自動執行測試環境的構建打包，是方便接著再配置自動壓縮，這里就需要使用到一個的插件。

需求

首先介紹一下本項目的背景，是基于 vue-cli3.1.1 的單頁應用，目前測試環境和生產環境都在線上，并且都在同一個域名下，其中生產環境部署在根目錄下，測試環境部署在名為 test 的子目錄下，根據生產環境和測試環境的不同，某些界面和交互有細微的差別。

根據以上項目的基本情況，分析出需求如下：

實現區分線上生產環境和線上測試環境的環境變量，供項目代碼中全局使用。

實現輸入一行命令，執行兩條指令，分別打包線上生產環境和線上測試環境的代碼。

實現打包之后，自動將打包好的文件夾分別按照項目名+時間+環境的格式壓縮成 zip 文件

配置環境變量和模式

根據 vue-cli3 文檔，可以通過設置項目根目錄下的 .env，.env.[mode] 文件來指定環境變量。

創建一個 .env 和 .env.beta 文件，在 .env 文件中，配置如下：

VUE_APP_URL = "/"   // 用來設置項目的 baseUrl 和路由的 base 選項 默認是根目錄
VUE_APP_MODE = ""   // 設置一個變量 區分線上生產環境和線上測試環境 默認是生產環境
outputDir = "dist"  // 用來設置打包后生成的文件夾的名字，默認為 dist 文件夾

在 .env.beta 文件中，配置線上測試環境，如下：

NODE_ENV = "production"   // 因為是打包項目 所以 NODE_ENV 還是 production
VUE_APP_URL = "/test/"   // 線上測試環境，部署在 test 目錄下 
VUE_APP_MODE = "test"   // 這個變量表示當前是線上測試環境
outputDir = "beta"      // 將線上測試環境打包后生成的代碼放在 beta 文件夾下，以示區別。

定義好環境變量之后，把項目制定的路徑配置到路由和 vue 配置文件中去：

// router.js
export default new Router({
    base: process.env.VUE_APP_URL,
    ...
})

// vue.config.js
module.exports = {
    baseUrl: process.env.VUE_APP_URL,  // 從 Vue CLI 3.3 起已棄用，改成publicPath
}

在項目代碼中，可以在任意位置使用 process.env.VUE_APP_MODE 的值來判斷是線上生產環境還是線上測試環境，用以編寫不同的業務代碼。例：

if(process.env.VUE_APP_MODE == "test"){
    this.name = "線上測試用戶"
}

配置好不同模式的環境變量之后，在 package.json 里面設置一個 beta 模式：

{
    "scripts": {
        ...
        "beta": "vue-cli-service build --mode beta"
    }
}

這樣配置完之后，在命令行運行 npm run beta ，會在根目錄下生成一個 beta 文件夾，里面就是打包出來的線上測試版本的項目文件。

至此就完成了分環境配置打包，但是這樣的麻煩點在于，每次要在命令行輸入兩次命令，因為我們的項目文件都是發送給后端去部署，所以還需要把文件壓縮成 zip，每次都要手動操作，是在有點累。所以，還需要進行一些小小的改造，徹底解放俺們的雙手~~

合并構建打包命令并且自動生成壓縮文件

將兩個命令合并成一個很簡單，只需要在 package.json 里面配置一下，新建一個新的命令用于同時調用兩個命令。

{
    "scripts": {
        ...
        "beta": "vue-cli-service build --mode beta",
        "publish": "vue-cli-service build && vue-cli-service build --mode beta"
    }
}

這樣配置好之后，只要執行npm run publish，它會自動先執行正式環境構建打包，完成之后再自動執行測試環境的構建打包，hin是方便~~

接著再配置自動壓縮，這里就需要使用到一個 webpack 的插件 — filemanager-webpack-plugin。

先安裝，可以在命令行安裝，也可以直接在 vue-cli3 自帶的圖形管理界面搜索安裝，都挺方便。

npm install filemanager-webpack-plugin -dev

安裝完成之后，在 vue.config.js 里面配置一下這個插件，它提供了豐富的操作文件的選項，這里我只需要使用刪除和壓縮：

let ts = Date.parse(new Date());
module.exports = {
    ...,
    chainWebpack: (config) => {
                if(process.env.VUE_APP_MODE == "test"){
            config.plugin("compress")
                .use(FileManagerPlugin, [{
                    onEnd: {
                      delete: [   //首先需要刪除項目根目錄下的dist.zip
                        "./*.zip",
                      ],
                      archive: [   //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
                        {source: "./dist", destination: `./biProject-${ts}-production.zip`},
                        {source: "./beta", destination: `./biProject-${ts}-test.zip`}
                      ]
                    }
                }])
        }
    }
}

歐克 ~ 大功告成 ~ ^_^ ~

GPU云服務器云服務器 vue-cli3 開發測試環境開發環境配置阿里云服務器測試環境配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109551.html

vue-cli3.x 新特性及踩坑記

摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 評論0 收藏0
vue學習系列（二）vue-cli

摘要：一介紹是官方提供的腳手架，用來快速建立項目。標識項目名稱，這個你可以根據自己的項目來起名字。初始化完成之后，進入安裝目錄，必須先安裝項目依賴，否則無法運行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。一.介紹 vue-cli是官方提供的腳手架，用來快速建立項目。二.安裝 npm install vue-cli -g//全局安裝三.初始化項目 vue init ...

baishancloud 2019-08-26 11:50 評論0 收藏0
vue學習筆記（四）

摘要：提供了兩種向組件傳遞參數的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡介我們經常使用vue開發單頁面應用程序（SPA）。在開發SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...

frank_fun 2019-08-21 17:16 評論0 收藏0
vue學習筆記（四）

摘要：提供了兩種向組件傳遞參數的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡介我們經常使用vue開發單頁面應用程序（SPA）。在開發SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...

lwx12525 2019-08-01 17:50 評論0 收藏0
vue開發項目完全指南

摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0