vue需要什么环境,vue.js与vue的区别

  vue需要什么环境,vue.js与vue的区别

  这篇文章主要介绍了某视频剪辑软件中怎么区分不同的环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  

目录

   如何区分不同环境方式一、手动修改不同的变量方式二、使用进程。环境。节点_环境来区分方式三、编写不同的环境变量配置文件某视频剪辑软件配置不同环境需要配置以下文件

  

如何区分不同环境

  我们在某视频剪辑软件开发中常常要根据不同的环境区分不同的变量,常见的环境有如下几种:

  生产环境:生产,开发环境:发展,测试环境:测试。

  

方式一、手动修改不同的变量

  const BASE _ URL= http://dlfordmc。组织/开发

  const BASE_NAME=coder

  //const BASE _ URL= http://dlfordmc。组织/生产

  //const BASE_NAME=kobe

  //const BASE _ URL= http://dlfordmc。组织/测试

  //const BASE_NAME=james

  导出{基本URL,基本名称}

  我们当处于什么环境下,就将什么变量的注释取消。这样做太过于繁琐,并且也不安全。如果我们忘记,当处于生产环境下的,我们使用的是开发环境下的变量,此时就会造成不安全。

  

方式二、使用process.env.NODE_ENV来区分

  让BASE_URL=

  让BASE_NAME=

  如果(过程。环境。node _ ENV===生产){

  BASE _ URL= http://dlfordmc。组织/生产

  BASE_NAME=dmc

  } else if(过程。环境。node _ ENV=== development ){

  BASE _ URL= http://dlfordmc。组织/开发

  BASE_NAME=dl

  }否则{

  BASE _ URL= http://dlfordmc。组织/测试

  BASE_NAME=dlfordmc

  }

  导出{基本名称,基本网址}

  

方式三、编写不同的环境变量配置文件

  需要在根目录下编写三个文件:环境。开发vue _ APP _ BASE _ URL=https://福特mcdl。组织/开发部门

  VUE应用基础名称=开发项目。环境。量产vue _ APP _ BASE _ URL=https://福特mcdl。组织/生产

  VUE应用基础名称=生产。环境。测试vue _ APP _ BASE _ URL=https://福特mcdl。组织/测试

  VUE应用基础名称=测试

  此时在其他地方访问的时候

  控制台。日志(流程。环境。vue _ APP _ BASE _ URL)//https://福特mcdl。组织/开发部门

  控制台。日志(流程。环境。vue _ APP _ BASE _ NAME)//deve pmem

  注意:此时必须要加上VUE_APP访问的时候需要加上流程。包封/包围(动词envelop的简写)

  

vue配置不同环境

  官网学习:https://CLI。vue js。org/zh/guide/mode-and-env。html #模式

  假如项目有四个环境:开发、生产、测试、其他

  

需要配置以下文件

  1.package.json

  某视频剪辑软件脚手架默认有2个环境,开发和生产,在本地环境开发,发布到生产环境,配置如下

  脚本:{

   dev : web pack-dev-server-inline-progress-config build/web pack。戴夫。糖膏剂js ,

  开始: npm运行开发,

  lint: eslint - ext .js,100 .vue src ,

  生成“:”节点 build/build.js

  },

  如果变成四个环境,1个本地开发,3个可发布测试。

  首先,我们需要想清楚,我们需要的是什么。

   需要本地开发,打包到不同环境测试发布;

   还是开发时就是不同环境,打包也是不同环境

  如果是第一种

  脚本:{

   dev : web pack-dev-server-inline-progress-config build/web pack。戴夫。糖膏剂js ,

  开始: npm运行开发,

  lint: eslint - ext .js,100 .vue src ,

  生成“:”节点build/build.js ,

  //用这种

  build-dev : cross-ENV NODE _ ENV=production ENV _ config=dev NODE build/build。js ,

  "构建-测试":"跨环境节点环境=生产环境配置=测试节点构建/构建。js”,

  build-prod : cross-ENV NODE _ ENV=production ENV _ config=prod NODE build/build。js

  //或用这种vue3.0

  "构建":" vue-CLI-服务构建模式开发",

  产品版本: vue-CLI-服务构建模式生产,

  “测试版本”:“vue-CLI-服务构建模式测试"

  },

  如果是第二种

  脚本:{

  "服务":" vue-CLI-服务服务模式开发",

  测试: vue-CLI-服务服务模式测试,

  生产: vue-CLI-服务服务模式生产,

  "构建":" vue-CLI-服务构建模式开发",

  产品版本: vue-CLI-服务构建模式生产,

  “测试版本”:“vue-CLI-服务构建模式测试"

  },

  以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: