vuejs添加环境常量----多环境开发打包场景解决方案之一

1、在congig目录下面添加新的js

'use strict'

const chalk = require('chalk')
/*
* 环境列表,第一个环境为默认环境
* envName: 指明现在使用的环境
* dirName: 打包的路径,只在build的时候有用
* baseUrl: 这个环境下面的api 请求的域名
* assetsPublicPath: 静态资源存放的域名,未指定则使用相对路径
* */
const ENV_LIST = [
    {
        envName: 'dev',
        dirName: 'dev',
        baseUrl: 'http://0.0.0.0:8080/crm/crm',
        assetsPublicPath:'./'
    },
    {
        envName: 'test',
        dirName: 'test',
        baseUrl: '',
        assetsPublicPath: './'
    },
    {
        envName: 'pro',
        dirName: 'pro',
        baseUrl: '',
        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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值