vue中配置webpack不同環境下的網域名稱及引數

假設乙個專案需要有開發環境(dev), 測試環境(test), 正式環境(prod), 並且三種環境都要build打包的需要;

前提是已通過vue-cli初始化了專案;

1.先在page.json中配置指令碼命令

// 開發環境啟動 "serve:dev" :"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ,//測試環境啟動 "serve:test" :"webpack-dev-server --inline --progress --config build/webpack.test.conf.js" ,// 生產環境啟動待定 // "serve:prod": "webpack-dev-server --inline --progress --config build/webpack.test.prod.js", //開發環境打包 "build:dev" :"node_env=development env_config=dev node build/build.js" ,//測試環境打包 "build:test" :"node_env=test env_config=test node build/build.js" ,//生產環境打包 "build:prod" :"node_env=production env_config=prod node build/build.js"

,

注意:npm指令碼的引數,如 node_env 和 env_config 都可在全域性變數process.env中取到

2. 新增檔案及修改**

1.在build目錄下新增 webpack.test.conf.js 檔案, 在config檔案下新增test.env.js

2.複製 build/webpack.dev.conf.js 內容到 webpack.test.conf.js, 複製config/dev.env.js內容到test.env.js

3. 修改 webpack.test.conf.js檔案

new
webpack.defineplugin()
,

4.config/dev.env.js檔案內容為

'use strict'
const merge =
require
('webpack-merge'
)const prodenv =
require
('./prod.env'
)module.exports =
merge
(prodenv,
)

5.config/test.env.js檔案內容為

'use strict'
const merge = require('webpack-merge')
const prodenv = require('./prod.env')
module.exports =

3.執行驗證

此時執行啟動命令如npm run serve:test

通過執行build/webpack.test.conf.js檔案並設定'process.env': require('../config/test.env')

這樣跑起來的專案就可通過process.env拿到不同網域名稱位址和引數

可在src/api/base.js 中(我做的專案是這麼搞得)

4.接下來說打包

修改 build/webpack.prod.conf.js檔案

// 14行:  
const env = require('../config/prod.env')
// 修改改為  
const env = require('../config/' + process.env.env_config + '.env');

注:其中的process.env.env_config已通過npm命令傳遞

node_env=test env_config=test node build/build.js

直接執行打包命令驗證即可

//啟動執行並配置啟動命令 "dev": "cross-env node_env=development webpack-dev-server --config build/webpack.config.dev.js", // 打包方式1執行打包檔案 "build": "cross-env node_env=production webpack --config build/webpack.config.prod.js" // 打包方式2 "builddev": "cross-env node_env=development env_config=dev node build/build.js",

"build": "cross-env node_env=production env_config=prod node build/build.js",

###擴充套件既然build時可以傳引數那麼啟動專案時為何不傳參呢??

改變npm指令碼

"serve:dev" :"node_env=development env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ,"serve:test" :"node_env=test env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ,// 經驗證這個正式環境不能這樣搞

// "serve:prod": "node_env=production env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

刪除多餘的webpack.test.conf.js檔案; 修改webpack.dev.conf.js檔案

new
webpack.defineplugin()
,

經過上述發現最優配置為:

安轉cross-env

在命令中指定 env_config

配置不同的全域性變數即可

"serve:dev" :"cross-env env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ,"serve:test" :"cross-env env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ,"serve:prod" :"cross-env env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ,"build:prod" :"cross-env env_config=prod node build/build.js" ,"build:dev" :"cross-env env_config=dev node build/build.js" ,"build:test"

:"cross-env env_config=test node build/build.js"

webpack.dev.config.js 48行

new webpack.defineplugin(),

webpack.prod.config.js 15行

const env = require('../config/' + process.env.env_config + '.env');

config/dev.env.js

'use strict'
const merge =
require
('webpack-merge'
)const prodenv =
require
('./prod.env'
)module.exports =
merge
(prodenv,
)

config/prod.env.js

'use strict'
module.exports =

config/test.env.js

'use strict'
// const merge = require('webpack-merge')
// const prodenv = require('./prod.env')
module.exports =

vue中配置webpack不同環境下的網域名稱及引數

webpack中loader及Vue配置

簡單配置webpack4 vue

webpack中結合Vue使用

vue中配置webpack不同環境下的網域名稱及引數

webpack中loader及Vue配置

簡單配置webpack4 vue

webpack中結合Vue使用

相關推薦