Vue項目判斷開發、測試、正式環境的方法

本篇內容主要講解“Vue項目判斷開發、測試、正式環境的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue項目判斷開發、測試、正式環境的方法”吧!

方法一

最簡單的方法：通過判斷location.href來判斷環境

function env() {
    if (process.env.NODE_ENV === "development") return "development";   //開發環境
    if (window.location.href.includes('192.168')) return 'test';        //測試環境，"192.168"根據實際情況而定
    return 'production'                                                 //線上環境
}

方法二

適用于Vue Cli 2.x構建的項目

Vue Cli 2.x構建的項目只有npm run dev和npm run build兩條開發和編譯的命令。而要添加測試環境，我們可以擴展一條npm run test的命令輸出測試環境下執行的代碼。

1.在build文件夾中創建test.js文件

test.js中的代碼很簡單，就兩行。主要就是配置一個環境變量用以區別測試和正式環境。這里沒有直接修改原有的process.env.NODE_ENV是擔心會影響到原本的邏輯。

注意：type的值必須單雙引號兩層嵌套，不能直接為’test’，否則會報錯，具體代碼如下：

// 配置環境變量 type 為 test
process.env.type = '"test"'
// 引入build.js文件，執行原先的編譯代碼
require('./build')

2.修改config文件夾中的prod.env.js文件

配置好后就可以在項目代碼中調用process.env.type了，代碼如下：

module.exports = {
  NODE_ENV: '"production"',
  // 將上文設置的環境變量，賦值到 type 屬性上
  type: process.env.type
}

3.在package.json文件中添加npm run test命令

添加一條命令，執行我們上文創建的test.js文件

"scripts": {
    "dev": "node build/dev-server.js",
    "test": "node build/test.js",
    "build": "node build/build.js"
},

4.在項目代碼中判斷環境

按照上述的步驟做完后，就可以在項目代碼中寫判斷了

let baseURL
// 開發環境
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://192.168.1.110:8080/'
// 編譯環境
} else {
    // 測試環境
    if (process.env.type === 'test') {
        baseURL = 'http://test.xxx.com/'
    // 正式環境
    } else {
        baseURL = 'http://app.xxx.com/'
    }
}

到此，相信大家對“Vue項目判斷開發、測試、正式環境的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！