20-环境变量和模式原创

我们继续的来学习V的高级应用这一章，我们来看一下如何在V中使用环境变量和模式。环境变量在项目工程化里担当着越来越重要的角色了，它能够很好的帮助我们区分不同的环境，最简单的呢就是development和production环境，也就是dev和prod环境。也是开发和生产环境，它们在配置上和使用上都有一定的区别。那在weight中如何使用环境变量呢？我们通过import.t.env来实现。我们在前面的章节里边接触过这个变量，我们可以通过在import点点inv里边去挂载一些东西，这里所有的挂载的内容都是V内置的。那在V中默认可以存在四个环境变量，第一个就是mode，它表示应用运行的模式，可以通过它来实现不同环境的区分，比如div local环境、div环境、test环境、集成环境或者是线上环境等等，我们都可以通过这个环境变量来区分。第二个base URL。

这个表示部署应用的基本URL，比如本地的logo的3000，以及发到线上的某个具体的域名等等。第三个prod prod呢是production的缩写，表示应用是否运行在生产环境中。最后一个D表示应用是否运行在开发环境中，这个环境变量永远与prod相反。接下来我们来具体演示一下，看看他们如何使用。返回我们Vs code的，我们执行一下CTRL加波浪线，呼唤出我们命令行的终端工具，然后我们执行一下PN PM create wait，我们来创建一个新的为的项目，取名为wait basics env，然后我们去选择我内了，再选择我内的TS，然后我们CD到wait basic env，然后我们执行一下PN PM install来安装一下项目的依赖，然后我们执行一下PNPM软DV。

我们在浏览器上面打开我们这个项目，然后我们看到了这样的一个欢迎页面。再回到我们的项目，打开v basic inv这个目录。到src的慢TS里把这些代码先暂时的删掉，我们就来打印一下import.mat.env保存一下。我们来看一下在我们的开发环境里边，它的打印是什么内容？回到浏览器，我们点击右键检查，在conso里边，我们看到这里打印了一个对象，这个对象的里边是什么内容呢？一共有五部分内容，Base URL表示我们当前站点的根，那就是一个斜线了。

Dev表示我们是否在开发环境里，这里是true mode表示我们的环境的名字，这里头有个单词叫development。Prod表示是否在开发环境里肯定是false，它跟D肯定是互斥的。SSR是false，表示我们当前并不是在幅端渲染的环境下。关于SSR，我们后续的章节里还会详细的介绍。那么下面我们来看一下V在开发环境里边代码究竟是什么样的呢？我们可以打开sources，在src下面有一个manner ts，我们看到在import.mat env上面它挂了一个对象，这对象呢，就是刚才我们在控制台上面打印的这个对象，然后在后边呢，它又通过cons.log，来去打印一下import，点点in为。

那我们在生产环境里面是什么样子的呢？我们也可以看一下。回到我们的编辑器在里边呢，我们按照CTRLC退出我们这个服务环境，执行一下PN PM run build。这样在我们项目的game录下面就产生一个Dis这样的文件夹，我们打开as set下面的index后面加个哈希的一个编译好的GS文件，我们按照alt加Z来做一个代码的折行，在代码的最后我们看到这有个console log打印了一下这样的一个对象，我们仔细的观察一下这个对象base u moded跟刚才我们在开发环节里面看的是一样的，Div和prod，它直接赋以叹号一和叹号零，叹号一翻译过来就是false，叹号零翻译过来就是true，因为在生产环境中，所以prod的值应该为true。大家也发现了，其实事实上呢，我们Co log的内容并没有import.mett.inv因为在生产环境里边呢，它直接的把我们那个内容给替换了，我们又称之为叫做production replacement，也就是开发环境的一个替换，那为了进一步的验证它，我们在慢点TS里边再去打印一下，我们可以console log一下import.mat点音v.mode保存一下。

然后我们重新的去build一下。再次打开build好的这个JS文件，然后我们折下行，看到最后的这个打印呢，就是一个字符串production了，也就是说我们由此可以证明，在good完了以后，在生产环境里边肯定不会有import.me.in为了使用过外pack的view c的同学应该知道，我们会在项目的根目录下面去定义一个点in nv这样的文件，这样我们在不同的环境下面可以读取不同的变量来完成我们的打包的任务。

那我们可以做个实验，看看在wait里面如何去做这个功能呢？我们在下面的game目录下面也创建一个文件，叫做点env，然后呢，我们试图的去定义一个变量啊，我们这个变量的名字在wait环境下面要以wait作为前缀下划线，比方说我们定义一个ENV等于它的值呢，我们可以定义成http local host端口号，我们可以定义成3000保存一下，然后我们看到这个wait inv能不能自动的被读到我们的环境变量里了呢？我们可以去启动一下我们的服务，这些下PN PM run div启动起来以后呢，我们再次到浏览器上面来刷新一下页面，我们看到果然我们当前的对象里边多了一个新的对象，叫做fate inv，它的值就是刚才我们定义的本地的一个URL地址。

那可见呢，我们是可以通过V的开头来去定义一个这样的自定义的一个环境变量的，那我们只需要去在项目根目录下面创建一个点env这样的文件就可以了，Wait会自动的进行读取，这个特点呢跟we pack有点类似，其实除了这个点env以外，我们还可以去定义另外的一些内容，比方说我们可以定义一个点in.development表示我们要在一个集成开发环境里边去配置我们的环境变量，好，那我们仍旧是定一个wait inv等于HTTP，这个我们可以定义一个IP地址，比方说192.168.100.2，后边呢，我们可以冠以8080保存一下，表示我们这是本地的一个集成开发环境。然后接下来呢，我们再来看一下这个配置它的优先级是否高于EV呢？我们再次回到浏览器，我们刷新一下，发现并没有发生变化，原因是因为我们每次在创建一个新的或者是修改我们配置文件的时候呢，得需要重新的启动一下我们本地的服务，启动完了以后呢，我们再来看，这里头就变成了这样的一个地址了，也就说明我们这个inv后面的development，它的优先级要高于点inv，那同理我们还可以继续的去定义，我们新建一个文件点v.development.local local表示本地的一个配置，它的优先级比development更高，那我们可以定义一下V，因为等于http local host冒号3000，保存一下，然后我们重新的启动一下我们的服务，回到浏览器，我们再来看一下，这回又变成了一个local host的3000了。

那在生产环境里边，我们能不能去定义一个环境变量呢？当然是可以的，我们在项目的跟踪下面再次创建一个新的文件，叫做点EV，后边呢写一个production。

然后在这后面呢，我们定一个v inv等于HTTP，我们写了一个线上的域名3w.abc.com保存一下，然后我们退出这个服务，执行一下PAPM软build。好，然后我们打开this目录下面的set下面的index.js，好，我们看一下后边呢，它会帮助我们把inva production里边的这个字符串给读进来了，这样的情况下我们就可以根据不同的环境去读取不同的预置的变量了，这样情况下对于我们项目的调试提供了一个非常大的便利。那使用过外派的同学应该还知道，我们能不能在启动服务的时候自动的来去指定这个mode呢？当然是没有问题的，我们可以在wait basic inv下面创建一个新的文件，比方说我们定义一个Inv.test但后边呢，我们仍旧是使用这个wait inv，它的值我们可以定义成一个test，然后我们打开package.jason这里边呢，这个dev呢，我们可以指定某个mode。

比方说我们可以写一个新的叫做dev冒号test，后边呢，我们我们可以编写一个新的命令行，比方说wait杠杠mode后面加个test，其中这个test就是刚刚我们编写的，点in.test啊，保存一下，然后我们执行一下PN PM run d冒号test，好，然后呢，打开浏览器，我们发现这个v inv就变成了test了。最后我们看一下在V的TS环境里边如何识别我们这些环境变量，我们先把这些文件都先关闭掉。然后打开我们S2C下载慢点TS，现在呢，我们想去读取因V后面的变量，比方说我们写的点，大家看到现在我们只能读取到base u DV mode prod和SSR，那它不能够默认把我们的V_env给指示出来，说明我们这个inv下面没有这个类型，那我们如何的去定义我们自己定义的类型呢？我们可以在 wait inv.d.TS里边去定义，具体的定义方法，我们要写一个interface，后面加一个名字叫做import MAT env，后边呢，我们就可以把我们的自定义的名字v env给定义上，它的类型是个string，定义好了以后，在这后面呢，我们再去点的话，就能够读取到我们这个v in，为了这样的情况下，我们在TS里边就可以集成我们当前自己定义的这些变量了。

有关V中的环境变量以及环境的模式，我们就介绍完了。用过外派的小伙伴应该发现了，V工具的使用体验还是很丝滑的，有了这个import.ma.inv环境变量的配置就要比外派显得简单一些。

这个功能在现代的大型项目里边非常的有用，好，本章就介绍这么多，大家加油。