vue專案的多環境配置 (學者說)

2021-10-16 12:23:39 字數 1350 閱讀 8269

package.json 裡的 scripts 配置 serve stage build,通過 --mode *** 來執行不同環境

"scripts"

:

node_env

='development'

must start with

='development'

node_env

='production'

must start with

='staging'

node_env

='production'

must start with

='production'

這裡有個問題,既然這裡有了根據不同環境設定變數的檔案,為什麼還要去 config 下新建三個對應的檔案呢?

修改起來方便,不需要重啟專案,符合開發習慣。

// 根據環境引入不同配置 process.env.node_env

const config =

require

('./env.'

+ process.env.

)module.exports = config

配置對應環境的變數,拿本地環境檔案 env.development.js 舉例,使用者可以根據需求修改

// 本地環境配置

module.exports =

根據環境不同,變數就會不同了

// 根據環境不同引入不同baseapi位址

import

from

'@/config'

//解構賦值出當前環境的baseurl的位址

console.

log(baseurl)

//2. 建立axios的物件

const server = axios.

create()

;

通過 npm run serve  啟動本地 , 執行 development ↘

通過 npm run stage 打包測試 , 執行 staging ——>

*通過指令啟動不同執行環境*

通過 npm run build 打包正式 , 執行 production ↗

Vue多環境配置

大家都知道,使用vue cli腳手架生成的vue專案只有開發環境和生產環境,然而在實際開發中,用到的不止這些環境,還包括測試環境,準生產環境等等。所以需要自己新增沒有的環境。以測試環境為例,配置如下 package.json檔案下scripts節點物件中新增一條屬性。test node build ...

vue專案的實用配置

在使用vue開發專案的過程中,免不了在除錯的時候會寫許多console,在控制台進行除錯 在開發的時候這種輸出是必須的,但是build後線上執行時這個東西是不能出現的 那麼我如何配置專案,從而讓webpack幫我刪除掉console呢?下面我們給出了vue cli 3.0和vue cli 2.0的配...

菜鳥看前端(vue專案多環境配置)

package.json 裡的 scripts 配置 serve stage build,通過 mode 來執行不同環境 scripts 配置介紹 env.development是本地開發配置node env development must start with development env.p...