DDR爱好者之家

基于vue cli 通过命令行传参实现多环境配置
站长资源 2024/11/26 佚名
21 1538
DDR爱好者之家 Design By 杰米

大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了

npm run serve //默认本地开发环境

npm run serve -sit //本地开发中使用sit环境

npm run serve -uat //本地开发中使用uat环境

npm run build //默认打包后使用生产环境

npm run build -local //打包后使用本地环境

npm run build -sit //打包后使用sit环境

`npm run build -uat //打包后使用uat环境

如果对@vue/cli还不熟的话，建议看看这篇文章https://www.jb51.net/article/138055.htm

我们首先在根目录下面创建一个vue.config.js文件,如图

基于vue cli 通过命令行传参实现多环境配置 

vue.config.js代码如下:

const webpack = require('webpack')
const environment = require('./build/environment')
module.exports = {
 baseUrl: '/wxperp/',
 configureWebpack: {
 plugins: [
 new webpack.DefinePlugin({
 'process.env.STAGE': JSON.stringify(environment.stage),
 'process.env.LOCAL_URL': JSON.stringify(environment.localUrl)
 })
 ]
 }
}

new webpack.DefinePlugin的作用是允许你创建一个在编译时可以配置的全局常量

然后在根目录创建一个build文件夹,里面创建一个environment.js的文件

基于vue cli 通过命令行传参实现多环境配置 

environment.js代码如下:

const os = require('os')
// 获取命令行变量
const configArgv = JSON.parse(process.env.npm_config_argv)
const original = configArgv.original.slice(1)
const stage = original[1] "text-align: center">基于vue cli 通过命令行传参实现多环境配置 


environment.js代码如下:





(() => {
 const urlMap = {
 local: process.env.LOCAL_URL + 'api',
 sit: 'http://xxx.xxx.xxx:xxxx/sit/api',
 uat: 'http://xxx.xxx.xxx:xxxx/uat/api',
 prod: 'http://xxx.xxx.xxx:xxxx/prod/api'
 }
 //sit,uat,prod
 let stage = process.env.STAGE
 //development,production
 const nodeEnv = process.env.NODE_ENV
 //nodeEnv为production并且stage不存在默认为生产环境
 if (nodeEnv === 'production' && !stage) {
 stage = 'prod'
 } else {
 //stage不存在默认为本地开发环境
 stage = stage || 'local'
 }
 console.log('ip:' + urlMap[stage])
})()





我们输入 npm run serve -sit ,页面打印如下:


基于vue cli 通过命令行传参实现多环境配置 


再啰嗦下,process.env.NODE_ENV是@vue/cli提供的,貌似有三个值(development,production,test),


你运行 npm run serve 得到的就是development


你运行 npm run build 得到的就是production


你运行 npm run test 得到的就是test (我没试过)


我默认打包是打包生产环境,当然你也可以输入参数打包其他环境


总结


以上所述是小编给大家介绍的基于vue cli 通过命令行传参实现多环境配置，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米