由於項目需要使用webpack構建的工程,在開發過程中不同環境的配置不同,在各種環境的打包切換過程中需要手動修改相關配置達到預期目的。比較麻煩,所以借鑑別人方法寫了不同環境打包分類配置。
打包配置文件基本就是這樣
一個項目的開發調試過程肯定不止開發環境和生產環境,由於缺少環境常量,開發人員常常需要手動修改請求Api域名,進而導致如果項目存在多個環境時,多出的環境沒辦法自動化構建。
第一步、
新建一個env-config.js在build文件中
/*
使用方法示例:
打包:
打包dev環境:npm run build --dev
打包test環境:npm run build --test
打包pro環境:npm run build --pro
本地運行:
本地運行dev環境:npm run dev --dev
本地運行test環境:npm run dev --test
無【--xxx】參數,則默認爲dev環境:npm run dev
*/
'use strict'
const chalk = require('chalk')
const path = require('path')
/*
* 環境列表,第一個環境爲默認環境
* envName: 指明現在使用的環境
* dirName: 打包的路徑,只在build的時候有用
* baseUrl: 這個環境下面的api 請求的域名
* assetsPublicPath: 靜態資源存放的域名,未指定則使用相對路徑
* */
const ENV_LIST = [
{
//開發環境
envName: 'dev',
dirName: 'dev',
baseUrl: 'http://192.168.x.x:1111',
assetsPublicPath:'/'
},
{
//測試環境
envName: 'test',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xx.xx:2222',
assetsPublicPath: '/'
},
{
//生產環境(命令行參數(process.arg)中prod是保留字,所以使用pro)
envName: 'pro',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xxx.xxx:3333',
assetsPublicPath:'/'
},
]
console.log("process.env.assetsPublicPath="+process.env.assetsPublicPath)
//獲取命令行參數 http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ''
//沒有設置環境,則默認爲第一個
const HOST_CONF = HOST_ENV ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把環境常量掛載到process.env.HOST_ENV方便客戶端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// process.env.ENV_NAME = HOST_CONF.envName
// log選中的變量
console.log(chalk.green('當前環境:'))
console.log(HOST_ENV)
console.log(chalk.green('當前環境對應的常量:'))
console.log(HOST_CONF)
module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST
第二步、
修改 build下webpack.base.config.js 引入公用的env-config.js
require('./env-config.js');
第三步、
修改 build下webpack.dev.config.js的代碼
//找到plugins,在這裏面添加如下代碼
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
//添加下面代碼
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
}),
]
第四步、
修改 build下webpack.prod.config.js的代碼
//找到plugins,在這裏面添加如下代碼
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env,
//添加下面代碼
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
}),
}
以上配置已經完成
打包dev環境:npm run build --dev
打包test環境:npm run build --test
打包pro環境:npm run build --pro
本地運行:
本地運行dev環境:npm run dev --dev
本地運行test環境:npm run dev --test
無【--xxx】參數,則默認爲dev環境:npm run dev
直接在頁面調用 process.env.BASE_URL 就可以拿到配置的域名/ip
另外:
如果需要配置更多變量,如測試和生產的私鑰可以在env-config.js進行添加
//找到 ENV_LIST 在這裏修改
const ENV_LIST = [
{
//開發環境
envName: 'dev',
dirName: 'dev',
baseUrl: 'http://192.168.x.x:3333',
assetsPublicPath:'/',
privateKey:'devprivateKey',//後添加的私鑰
},
{
//測試環境
envName: 'test',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xx.xx:2222',
assetsPublicPath: '/',
privateKey:'testprivateKey',//後添加的私鑰
},
{
//生產環境(命令行參數(process.arg)中prod是保留字,所以使用pro)
envName: 'pro',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xxx.xxx:3333',
assetsPublicPath:'/',
privateKey:'proprivateKey',//後添加的私鑰
},
]
// 找到process.env.BASE_URL = HOST_CONF.baseUrl這段代碼,在下面添加
process.env.BASE_URL = HOST_CONF.baseUrl;
process.env.privateKey= HOST_CONF.privateKey; //添加的私鑰
然後我們需要在webpack.dev.config.js和webpack.prod.config.js裏面把如下代碼修改
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',
'process.env.privateKey': '\"' + process.env.privateKey+ '\"',//後加的私鑰
}),
以後需要更多配置變量可以按照以上方式添加。