vue命令多环境打包配置
一个项目可能有不同的版本,我们可以根据执行命令来区分不同的版本。比如:一个项目有大陆版和海外版,两个版本的接口地址和语言都不一样,那么可以根据命令来区分不同的版本,如下:1、在package.json中添加命令,在海外版命令中添加type变量为hw"scripts": {"dev": "webpack-dev-server --open --inline --progress --...
·
一个项目可能有不同的版本,我们可以根据执行命令来区分不同的版本。比如:一个项目有开发环境、测试环境、产线环境,几个版本的接口地址都不一样,那么可以根据命令来区分不同的版本,如下:
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
更多推荐
已为社区贡献23条内容
所有评论(0)