一个项目可能有不同的版本,我们可以根据执行命令来区分不同的版本。比如:一个项目有开发环境、测试环境、产线环境,几个版本的接口地址都不一样,那么可以根据命令来区分不同的版本,如下:

vue-cli 3.0

1、在项目根目录添加vue.config.js

// 根据打包命令,区分服务器
const env = process.env.npm_config_env;
console.log(env)
let server = "https://www.baidu.com"
if (env == "ft1") {
  server = "https://ft1.baidu.com"
} else if (env == "ft2") {
  server = "https://ft2.abaidu.com"
}
module.exports = {
  chainWebpack: config => {
    // 配置环境变量
    config.plugin("define").tap(args => {        // 讲参数传入项目中,可在main.js或者项目中的config通过process.env 获取
      args[0]["process.env"].server = JSON.stringify(server) // 注意:server本身不是字符串,赋值需要转字符串,或者写成'"' + server + '"'
      return args
    })
  }
}

2、在项目文件获取全局变量server,例如在main.js中

console.log(process.env.server)

3、npm运行命令及结果

npm run serve    // 结果:process.env.server = https://www.baidu.com
npm run serve --env=ft1   // 结果:process.env.server = https://ft1.baidu.com
npm run build --env-ft2   // 结果:process.env.server = https://ft2.baidu.com

vue-cli 2.0

1、dev模式配置,打开config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

// 获取env参数,区分服务器地址
const env = process.env.npm_config_env
let server = "https://www.baidu.com"
if (env == "ft1") {
  server = "https://ft1.baidu.com"
} else if (env == "ft2") {
  server = "https://ft2.abaidu.com"
}

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  server: '"' + server+ '"' // 接收命令中的env参数,赋值给server全局变量
})

2、prod模式配置,打开config/prod.env.js

'use strict'
// 获取env参数,区分服务器地址
const env = process.env.npm_config_env
let server = "https://www.baidu.com"
if (env == "ft1") {
  server = "https://ft1.baidu.com"
} else if (env == "ft2") {
  server = "https://ft2.abaidu.com"
}

module.exports = {
  NODE_ENV: '"production"',
  server: '"' + server + '"'
}

3、在项目中获取TYPE环境变量,区分不同版本

npm run serve    // 结果:process.env.server = https://www.baidu.com
npm run serve --env=ft1   // 结果:process.env.server = https://ft1.baidu.com
npm run build --env-ft2   // 结果:process.env.server = https://ft2.baidu.com

4、根据项目需求,还可以用来区分开发、测试和产线环境,不同的环境访问不同的后台地址

其他方案:官方env配置文档

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

Logo

前往低代码交流专区

更多推荐