快捷導(dǎo)航

Vue項(xiàng)目判斷開發(fā)、測試、正式環(huán)境過程

更新時(shí)間：2022年04月18日 11:40:08 作者：Vincentzyc

這篇文章主要介紹了Vue項(xiàng)目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

方法一

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

function env() {
? ? if (process.env.NODE_ENV === "development") return "development"; ? //開發(fā)環(huán)境
? ? if (window.location.href.includes('192.168')) return 'test'; ? ? ? ?//測試環(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兩條開發(fā)和編譯的命令。而要添加測試環(huán)境，我們可以擴(kuò)展一條npm run test的命令輸出測試環(huán)境下執(zhí)行的代碼。

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

test.js中的代碼很簡單，就兩行。主要就是配置一個(gè)環(huán)境變量用以區(qū)別測試和正式環(huán)境。這里沒有直接修改原有的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)目代碼中寫判斷了

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: