由于项目需要使用webpack构建的工程，在各种环境的打包切换过程中,由于缺少环境常量需要手动修改相关请求Api域名等配置达到预期目的。进而导致如果项目存在多个环境时，多环境没办法自动化构建。比较麻烦,故此增加此配置方法,操作方法如下:
第一步 : 新建一个env-config.js在build文件中
/*
使用方法示例：
打包：无【--xxx】参数，则默认为dev环境：npm run build
打包dev环境：npm run build --dev
打包test环境：npm run build --test
打包pro环境：npm run build --pro
本地运行：无【--xxx】参数，则默认为dev环境：npm run dev
本地运行dev环境：npm run dev --dev
本地运行test环境：npm run dev --test
本地运行pro环境：npm run dev --pro
*/
'use strict'
const path = require('path')
/*
* 环境列表，第一个环境为默认环境
* envName: 指明现在使用的环境
* dirName: 打包的路径，只在build的时候有用
* baseUrl: 这个环境下面的api 请求的域名
* assetsPublicPath: 静态资源存放的域名，未指定则使用相对路径
* */
const ENV_LIST= [
{
envName: 'dev', // 开发 --默认环境
dirName: path.resolve(__dirname, '../dev'),
baseUrl: '/api/',
httpUrl: 'http://xx.xx.xx.xx:8888',
assetsPublicPath:'/'
},
{
envName: 'test', // 打包 --测试环境
dirName: path.resolve(__dirname, '../test'),
baseUrl: 'http://xx.xx.xx.xx:8888',
assetsPublicPath:'/test'
},
{
envName: 'pro', // 开发 --生产环境
dirName: path.resolve(__dirname, '../pro'),
baseUrl: 'http://xx.xx.xx.xx:8888',
assetsPublicPath:'/pro'
}
];
// 获取命令行参数 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];
// 把环境常量 envName 挂载到process.env.HOST_ENV方便客户端使用
process.env.ENV_NAME = HOST_CONF.envName;
// 把环境常量 dirName 挂载到process.env.HOST_ENV方便客户端使用
process.env.DIR_NAME = HOST_CONF.dirName;
// 把环境常量 baseUrl 挂载到process.env.HOST_ENV方便客户端使用
process.env.BASE_URL = HOST_CONF.baseUrl;
// 把环境常量 httpUrl 挂载到process.env.HOST_ENV方便客户端使用
process.env.HTTP_URL = HOST_CONF.httpUrl;
// 把环境常量 assetsPublicPath 挂载到process.env.HOST_ENV方便客户端使用
process.env.ASSETS_PUBLICPATH = HOST_CONF.assetsPublicPath;
module.exports.HOST_CONF = HOST_CONF;
module.exports.ENV_LIST = ENV_LIST;
第二步 : 修改config下index.js引入公用env-config.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
// 引入 环境配置 文件
require('../build/env-config.js')
配置 dev 配置项的 请求代理类,如下:
proxyTable:{
'/api':{
target: process.env.HTTP_URL,
changeOrigin: true,
pathRewrite:{
'^/api': '/'
}
}
}
配置build 配置项的 静态资源路径,如下:
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: process.env.ASSETS_PUBLICPATH,
第三步 : 修改 build 下webpack.base.config.js文件 output 的配置
output:{
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.ASSETS_PUBLICPATH //静态资源路径
// publicPath: process.env.NODE_ENV === 'production'
// ? config.build.assetsPublicPath
// : config.dev.assetsPublicPath
}
第四步: 修改 build下webpack.dev.config.js 和 webpack.prod.config.js
的代码,找到plugins，在这里面修改如下代码
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
// 根据不同环境 选择地址
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',
// 根据不同环境 开发环境 http地址
'process.env.HTTP_URL': '\"' + process.env.HTTP_URL + '\"',
// 根据不同环境 资源输出路径
'process.env.ASSETS_PUBLICPATH': '\"' + process.env.ASSETS_PUBLICPATH + '\"'
})
在webpack.dev.config.js 中增加如下代码, 以便清楚启动的是哪个地址
console.log(chalk.blueBright(' 正在启动 ' + process.env.ENV_NAME + ' : ' + process.env.HTTP_URL + ' 请稍后... \n'));
第四步: 在http 的封装的 axios 请求中, 加入如下代码:
axios.defaults.baseURL = process.env.BASE_URL;