zoukankan      html  css  js  c++  java
  • 关于切换环境变量的问题( 以vue-cli3.0 为例)

      在 项目的开发中我们一般需要区分多种环境,有时候不一定只有开发环境,生产环境,测试环境,还有可能会区分更多的环境,那么区分这些环境的话,我们的配置有多中方式;

      方式一:直接只用  .env.development 和 .env.production 来进行环境的区分,每次发版的时候修改环境变量的值来加以领用;

      方式二:通过服务器的访问域名来区分,一般项目的域名都是不变的,捕捉到当前环境的域名,然后将变量处理一下就可以了;

      方式三: 通过 npm run dev 的命令来区分,我们可以创建多个  .env.modeName 的文件,通过在 package.json 中添加相应的命令,然后添加 --mode=modeName 来进行文件的切换,但是需要注意的是,设置 modeName 的时候,只有在相应的三个模式下才可以,例如:

          "serve": "vue-cli-service serve --mode=work", 是可行的;
             "dev": "npm run serve --mode=work",  是不可行的;
      环境、指令、环境变量之间的关系如下:
    vue-cli-service serve
    
    用法:vue-cli-service serve [options] [entry]
    选项:
    --open 在服务器启动时打开浏览器
    --copy 在服务器启动时将 URL 复制到剪切版
    --mode 指定环境模式 (默认值:development)
    --host 指定 host (默认值:0.0.0.0)
    --port 指定 port (默认值:8080)
    --https 使用 https (默认值:false)
    
    vue-cli-service build
    
    用法:vue-cli-service build [options] [entry|pattern]
    选项:
    --mode 指定环境模式 (默认值:production)
    --dest 指定输出目录 (默认值:dist)
    --modern 面向现代浏览器带自动回退地构建应用
    --target app | lib | wc | wc-async (默认值:app)
    --name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
    --no-clean 在构建项目之前不清除目标目录
    --report 生成 report.html 以帮助分析包内容
    --report-json 生成 report.json 以帮助分析包内容
    --watch 监听文件变化
    

      

      对于大多数的项目开发者都不愿意每次发一次版本就切换一次环境,所以用指令来区分环境,进而加载不同的 .env.modeName 是更加的省事也更加的方便的,那么问题就来了:对于本地开发的的时候我们能很快的就输入命令,进行命令的切换进而也执行不同的环境,那么对于维护的成员来说,怎么办呢?

      其实,对于大多数的公司来说,运维都是通过 jenkins 来进行发版的,通过 jenkins 的话,可以直接指定我们要发版的分支,而且他们可以配置系统参数,然后我们通过 process.env.VUECONFIG 来获取到是哪个环境的,再去加载哪个配置就可以了,进行环境变量的配置,对于 vue-cli2.0 的配置,其实就是 merge congfig 文件下的哪个 js 文件的问题,对于 vue-cli3.0 的话,如果我们知道了,process.env.VUECONFIG 之后,我们可以在 vue.config.js 中在 module.export 的 cinfigureWbepack: config => {} 中,通过 process.env.VUECONFIG 判断是什么环境,从而再去配置相应的值;

      我们的脚手架一般都是基于 node.js 的一个服务,其实我们也可以通过另外一种方式来确定是什么环境的,这个需要我们确定好相应的发版分支,利用 node.js 自带的依赖模块 

    child_process;结合 shelljs ;通过 child_process 来获取,当前是在哪个分支,然后利用 shelljs 去执行相应的 npm 命令;
    const shelljs = require('shelljs')
    const childProcess = require('child_process')
    // console.log(childProcess)
    // console.log(childProcess.execSync)
    const branch = childProcess.execSync('git rev-parse --abbrev-ref HEAD').toString().replace(/s+/, '')
      console.log('npm-build.js run branch: ', branch)
      // shelljs.exec(`npm run serve`)
    

      

  • 相关阅读:
    angularjs中ng-repeat插入图片
    Torch not compiled with CUDA enabled
    ai 网格变换工具
    ai 网格变换工具
    最后的进入nms的shape数值是怎么来的
    问题import win32api windows下安装pycocotools
    问题、
    输入的图片size为什么是32的倍数,yolo各个模型层说明。upsample+route过程
    YOLO V3代码带注释-阅读笔记系列
    张量或维度表示数学理解思路
  • 原文地址:https://www.cnblogs.com/mufc/p/11653890.html
Copyright © 2011-2022 走看看