vue webpack多環境打包配置

2021-09-10 07:52:09 字數 1684 閱讀 8781

我是用的vue-cli快速生成的專案結構,故下文以此為基礎:

// 原來**

'use strict'

module.exports =

// 修改後**

'use strict'

module.exports =

// 原**

'use strict'

const merge =

require

('webpack-merge'

)const devenv =

require

('./dev.env'

)module.exports =

merge

(devenv,

)// 修改後**

'use strict'

const merge =

require

('webpack-merge'

)const devenv =

require

('./dev.env'

)module.exports =

merge

(devenv,

)

// 原**

const env =

require

('../config/prod.env'

)// 修改後**

// 注釋掉 const env = require('../config/prod.env')

const env = config.build[process.env.env_config+

'env'

]// 新增

// 原**

const spinner =

ora(

'building for production...'

)spinner.

start()

// 修改後**

const spinner =

ora(

'building for'

+ process.env.

node_env

+'of'

+ process.env.

env_config

+'mode...'

)// 新增 'env_config '即是我們在config/prod.conf.js-test.conf.js下,我們定義的路徑名稱

spinner.

start

()

// 原**

build:

// 修改後的**

output:

,

"scripts"

:

完成以上配置後,就可以用npm run build:testnpm run build:prod進行不同環境的打包;在頁面可以通過process.env.env_config獲取到所配置的引數,但是注意env_config

是我們自己起的名字,前後以及在使用過程中,一定要注意一致,反正我是踩坑了【笑哭】

vue webpack環境搭建

vue專案搭建依賴node的npm包管理器,所以我們先得安裝node,此處就不詳細講解其安裝過程。npm install g vue cli安裝成功後可以輸入vue檢視相關命令的使用,輸入vue list可以檢視vue可以用的模板 我們這裡選擇webpack模板 vue init webpack p...

iview admin多環境配置打包

由於目前我在公司已經搭建了jenkins來進行一鍵系統發布,同時存在測試和生產兩套環境。但是目前iview admin是不支援的,只好自己進行改造了。ps iview admin版本為2.1.0 iview admin 2.1.0比起iview admin 2.0.0,移除了config目錄且將vu...

Nuxt 多環境靜態打包

env scripts npm run generate 預設是正式環境的包 npm run generate dev 打包開發環境下的靜態包 npm run generate test 打包測試環境下的靜態包 npm run generate pre 打包演示環境下的靜態包 npm run gen...