评论

vue配置不同的环境打包不同的接口

头发:请好好珍惜我

最近开发微信公众号H5页,测试的时候因为经常要手动切换测试环境和线上环境接口,比较繁琐,所以查了一下,有人用cross-env引来进行环境配置,我这边借鉴别人的方法做的代理配置。

首先在build文件夹新建文件env-config.js

第一步:新建env-config.js文件 代码如下

/*
 使用方法示例:
 打包:
 打包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://xxxxxxxx/api', // 域名地址
        baseRoute'http://xxxxxxx/sqb/', // 配置的路由地址
        assetsPublicPath:'/'
    },
    {
        //测试环境
        envName'test',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl'http://xxxxxxxx/api', // 域名地址
        baseRoute'http://xxxxxxxx/sqb/', // 配置的路由地址
        assetsPublicPath'/'
    },
    {
        //生产环境(命令行参数(process.arg)中prod是保留字,所以使用pro)
        envName'pro',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl'https://xxxxxxxx/api', // 域名地址
        baseRoute'https://xxxxxxxx/sqb/', // 配置的路由地址
        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.BASE_ROUTE = HOST_CONF.baseRoute;
// 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 和 webpack.prod.config.js 文件代码

// webpack.dev.config.js
plugins: [
 new webpack.DefinePlugin({
   'process.env': require('../config/dev.env'),
    //添加下面代码
   'process.env.BASE_URL''\"' + process.env.BASE_URL + '\"',
   'process.env.BASE_ROUTE''\"' + process.env.BASE_ROUTE + '\"',//后加的路由
 }),
]
// webpack.prod.config.js
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 + '\"',
   'process.env.BASE_ROUTE''\"' + process.env.BASE_ROUTE + '\"'//后加的路由
 }),
]

这里配置已经完成,直接在页面调用   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

如果需要配置其他变量,可以在env-config.js 对应环境中添加变量(比如上面已添加的路由变量BASE_ROUTE),然后需要在webpack.dev.config.js和webpack.prod.config.js中修改(参考第二步代码),配置后重启运行项目就生效了。

最后一次编辑于  2020-04-22  
点赞 0
收藏
评论
登录 后发表内容