Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境的方法

本篇內(nèi)容主要講解“Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境的方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境的方法”吧!

方法一

最簡(jiǎn)單的方法：通過(guò)判斷l(xiāng)ocation.href來(lái)判斷環(huán)境

function env() {
    if (process.env.NODE_ENV === "development") return "development";   //開(kāi)發(fā)環(huán)境
    if (window.location.href.includes('192.168')) return 'test';        //測(cè)試環(huán)境，"192.168"根據(jù)實(shí)際情況而定
    return 'production'                                                 //線上環(huán)境
}

方法二

適用于Vue Cli 2.x構(gòu)建的項(xiàng)目

Vue Cli 2.x構(gòu)建的項(xiàng)目只有npm run dev和npm run build兩條開(kāi)發(fā)和編譯的命令。而要添加測(cè)試環(huán)境，我們可以擴(kuò)展一條npm run test的命令輸出測(cè)試環(huán)境下執(zhí)行的代碼。

1.在build文件夾中創(chuàng)建test.js文件

test.js中的代碼很簡(jiǎn)單，就兩行。主要就是配置一個(gè)環(huán)境變量用以區(qū)別測(cè)試和正式環(huán)境。這里沒(méi)有直接修改原有的process.env.NODE_ENV是擔(dān)心會(huì)影響到原本的邏輯。

注意：type的值必須單雙引號(hào)兩層嵌套，不能直接為’test’，否則會(huì)報(bào)錯(cuò)，具體代碼如下：

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

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

配置好后就可以在項(xiàng)目代碼中調(diào)用process.env.type了，代碼如下：

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

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

添加一條命令，執(zhí)行我們上文創(chuàng)建的test.js文件

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

4.在項(xiàng)目代碼中判斷環(huán)境

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

let baseURL
// 開(kāi)發(fā)環(huán)境
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://192.168.1.110:8080/'
// 編譯環(huán)境
} else {
    // 測(cè)試環(huán)境
    if (process.env.type === 'test') {
        baseURL = 'http://test.xxx.com/'
    // 正式環(huán)境
    } else {
        baseURL = 'http://app.xxx.com/'
    }
}

到此，相信大家對(duì)“Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境的方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！