vuejs新增環境常量----多環境開發打包場景解決方案之一
阿新 • • 發佈:2018-11-29
1、在congig目錄下面新增新的js
'use strict' const chalk = require('chalk') /* * 環境列表,第一個環境為預設環境 * envName: 指明現在使用的環境 * dirName: 打包的路徑,只在build的時候有用 * baseUrl: 這個環境下面的api 請求的域名 * assetsPublicPath: 靜態資源存放的域名,未指定則使用相對路徑 * */ const ENV_LIST = [ { envName: 'dev', dirName: 'dev', baseUrl: 'http://10.20.13.50:8080/crm/crm', assetsPublicPath:'./' }, { envName: 'test', dirName: 'test', baseUrl: '', assetsPublicPath: './' }, { envName: 'pro', dirName: 'pro', baseUrl: 'http://test.yoodex.net/crm-plat/crm', 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 // log選中的變數 console.log(chalk.green('當前環境常量:')) console.log(HOST_CONF) module.exports.HOST_CONF = HOST_CONF module.exports.ENV_LIST = ENV_LIST
2、在config目錄下index.js配置路徑
const configPath=require('./env-config')
3、在webpack.base.conf.js中配置,但是別忘了const webpack = require('webpack')
plugins: [
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
})
],
4、使用
npm run dev --[envName]
npm run build --[envName]
如果後面不加envName則預設第一個配置環境
呼叫地址:process.env.BASE_URL