vue cli3 0線上環境和開發環境的配置

2021-10-06 08:40:03 字數 1525 閱讀 2579

我們乙個專案中呢,有多個介面,我們在進行開發的時候呢,如何進行介面位址的切換。這個時候就用到了環境的切換。

一:環境變數:

1.1 測試環境

test:

npm run test

1.1 本地環境
"serve"

//自動走測試介面

1.3 生產環境:
npm run build 

//走這個路線

"build"

:"vue-cli-service build"

,

二:環境變數介面的切換

2.1 通過vue官方腳手架來解決.

在檔案中新增

node_env

=環境名稱 //環境變數2

base_url

=url

//例如:

node_env

='production'

='pro'

node_env

='production'

='test'

outputdir = test //可以更改打包時輸出的目錄名字,預設為dist

"scripts"

:,

module.express =

,baseurl:

'/',

//基本路徑,不要隨意更改

outputdir: process.env.outputdir,

// 打包生成目錄

}

注意:乙個模式可以有多個環境變數。

2.2 通過webpack配合cress-env來進行配置.

npm install cross-env -

d

"scripts"

:

module.exports =

, chainwebpack: config =>)}

}

- build

- dev.js

- prod.js

例如:在prod.js中新增配置url,例如:

module.exports =

}

最後我們npm run build 或者npm run serve 就ok了。。。。

希望能對你有幫助,嘻嘻嘻其實我還有點蒙,歡迎隨時補充~

vue cli3 0配置開發環境與生產環境變數

第一步 在根目錄建立兩個檔案,檔名分別為 env.development和.env.production 第二步 分別編輯這兩個檔案 在不同的環境下設定不同的環境變數 env.development,這是開發環境下的url env.production,這是生產環境下的url 第三步 設定不同環境的...

vue cli 3 0環境安裝

2 cmd中使用命令安裝 nvm install 12.2.0 nvm list nvm use 12.2.0 3 在此時有可能會出現node安裝完畢然而npm安裝失敗的情況,此時修改nvm安裝目錄下的settings.txt檔案,在末尾新增兩行 node mirror npm mirror 4 安...

Vue cli 3 0設定環境變數和模式

通過配置環境變數,可以使我們的開發更加高效。最常見的情景是我們的api請求介面,他常常是分為開發環境,測試環境和生產環境的。如果每一次打包我們都是修改請求介面的位址,那樣就顯得太愚蠢了。並且如果區分區分環境的地方很多,你可能會有很多疏漏。而通過設定環境變數,統一管理每個環境下的所有變數。在vur c...