首页 > 其他分享 >vue-cli-service build --mode 区分多个环境

vue-cli-service build --mode 区分多个环境

时间:2023-03-13 10:33:32浏览次数:46  
标签:文件 vue cli service 模式 mode env 打包 build

有些时候,我们的项目会打包部署到多个环境,可能在不同环境中,我们需要进行区分,做不同的操作,这时候我们可以利用打包的--mode。

1. 首先在 package.json增加打包各模式的命令语句

2. 执行build命令打包

下面我们用示例【build:A】进行打包

    

 

 ??我们打包用的是环境A,但为啥打印处理的【NODE_ENV】是development呢?别急别急

 

 默认情况下,只有3种模式,如果我们没有配置对应的env文件,那会默认读取development的配置文件,所以,想要环境变量跟着我们的打包命令走,那需要配置这个模式的env文件,【env.模式】

文件中定义的数据只能是【NODE_ENV】、【BASE_URL】、【VUE_APP_开头】这3种key

打包后得到的参数,是【.env】文件和【.evn.打包模式】文件合并一起的数据,如果key重复,以【.evn.打包模式】文件的值为最终结果

 

 

 总结:需要打包区分不同环境

1. "build:xxx": "vue-cli-service build --mode xxx"   配置环境打包命令

2. 需要创建【.env.mode的模式值】这个文件,里面可以配置专属的环境值,切记key只能是【NODE_ENV】、【BASE_URL】、【VUE_APP_开头】

3. 打包后打印的process.env的值是【.env.mode的模式值】文件与【.env】文件合并的对象值,如果key重复,最终结果为【.env.mode的模式值】文件值

标签:文件,vue,cli,service,模式,mode,env,打包,build
From: https://www.cnblogs.com/grow-up-up/p/17210430.html

相关文章

  • Vue.js框架:单个div盒子(元素)放至全屏显示
    一、页面元素需要全屏展示的div或其他元素标签的id要设置,方便获取dom节点。再添加一个可以触发点击事件的元素进行操作。<divid="fullDom"><span@click......
  • windows部署vue项目:nginx
    一点废话:vue部署这个事儿原本是打算写上下两篇的,上篇nginx下篇tomcat,很完美。奈何笔者太菜tomcat还没学会,只好附点使用记录,等实操过了再来补全。在此立个flag,期待一下我薛......
  • Docker CLI docker buildx prune常用命令
    Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化。Doc......
  • 我的第一个vue页面
    1.使用编辑器打开我们使用vue-cli创建的项目2.创建自己的vue文件  1)在views文件夹中创建vue组件  注意:首字母大写eg.HelloView.vue<!--在页面中显示的内容-->......
  • vue以及vue脚手架的安装
    一、安装nodejs1.下载nodejs安装包,双击安装2.配置需要图片展示的配置addtopath是添加环境变量,全局使用node3.修改安装路径不想安装到c盘,点击change,改变安装路径......
  • 浅析前端自动部署工具deploy-cli-service和vscode使用sftp自动部署插件
    一、前端自动部署工具deploy-cli-service1、先安装deploy-cli-service依赖//全局安装deploy-cli-servicenpminstalldeploy-cli-service-g//本地安装deploy-cl......
  • CyclicBarrier循环屏障
    CyclicBarrier使用场景应用实例CyclicBarrier源代码分析流程分析总结1CyclicBarrier使用场景当有已知数量的线程需要在某一点同时执行时,先到达执行点的线程会进入等......
  • webpack、vite、vue-cli、create-vue 的区别
    首先说结论Rollup更适合打包库,webpack更适合打包项目应用,vite基于rollup实现了热更新也适合打包项目。功能工具工具脚手架vue-clicreate-vue构建项目 vit......
  • 建立新的vue项目
    1、win+R打开cmd.    2、开始新建项目 3、显示成功 4、cnpminstall安装模块到node_modules目录 5、跳到项目运行 6、成功,网页输入http://localh......
  • 【django-vue】课程表数据录入 课程分类接口 所有课程接口 课程详情接口 所有章节接口
    目录上节回顾APSchudler双写一致性今日内容1课程表数据录入2课程分类接口2.1路由2.2序列化类2.3视图类3所有课程接口(过滤,排序)3.1表模型3.2序列化类课程动态显示......