Vue多環境配置

2022-08-30 05:18:11 字數 1458 閱讀 7403

大家都知道,使用vue-cli腳手架生成的vue專案只有開發環境和生產環境,然而在實際開發中,用到的不止這些環境,還包括測試環境,準生產環境等等。所以需要自己新增沒有的環境。

以測試環境為例,配置如下:

package.json檔案下scripts節點物件中新增一條屬性。

"test": "node build/build-test.js"
在build資料夾下複製乙份build.js,重新命名為build-test.js。

修改build-test.js中的引數。

在build資料夾下複製乙份webpack.prod.conf.js,重新命名為webpack.test.conf.js。

修改webpack.test.conf.js中的引數。

修改webpack.base.conf.js中的引數。

修改vue-loader.conf.js中的引數。

在config資料夾下複製乙份prod.env.js,重新命名為test.env.js。

修改test.env.js中的引數。

各個環境全域性引數配置

新建global.js,配置全域性引數

在main.js中設定全域性配置時,不可使用global做屬性名,vue.prototype中已包含唯讀的global,需注意!!!

// 全域性引數配置

export default

import vue from 'vue'

import router from './router'

import global from '@/global/global'

// 全域性引數配置

npm run build
感謝閱讀!!!

Vue3 0 多環境配置

vue3的配置相比vue2就簡化了很多了。在根目錄下新建.env.dev 開發環境 env.test 測試環境 env.prod 生產環境 檔案,具體需要幾個環境根據需要決定。env 字尾叫啥都可以,自己高興就好,當然最好也要讓別人一目了然。其他的自己照搬,改改就好了 修改package.json ...

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

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

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

package.json 裡的 scripts 配置 serve stage build,通過 mode 來執行不同環境 scripts node env development must start with development node env production must start w...