记录转载：Vite多环境配置--让项目拥有更高定制化能力

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

业务背景

近些年来，随着前端工程架构发展，使得前端项目中也能拥有如后端工程的模块能力。正所谓 “能力（越）越大（来），责任（越）越大（卷）”，现在的前端工程不仅仅要满足业务需求，还伴随更多复杂的环境适配问题，例如：

1.api请求的域名会根据不同环境而不同；
2.线上环境和测试环境在打包策略有所不同「如线上要隔离sourceMap、屏蔽vue|react devtools等...」；
3.前端spa组件根据不同环境做出不同逻辑；

老板恨不得把所有应用端都收归到一个项目里面，什么微前端、uniapp多端方案接踵而至。。。但无论是什么方案，都离不开一个核心点：环境变量和多环境适配。那么，今天我们就来聊下如何在Vite中实现一套拓展能力强的多环境适配方案。

多环境场景的业务形态

我们先来了解，在多环境下要求前端工程架构流程是怎样的？

如上图所示，在工程`启动 / 构建`时：

环境变量注入：一般通过命令参数模式，可在package.json里配置；
多模式文件：Vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为Vite的环境模式；
环境收集器：简单理解为1个函数，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出；
客户端环境差异定制化：客户端（也就是工程里面的.vue、.ts、.tsx等前端文件）获取到环境参数做一些特定区分逻辑；
构建和发布：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。

Vite多环境方案实现

多模式文件配置

自定义环境变量

Vite通过多模式来配置不同启动场景下的特性环境变量，你可以创建自定义的模式文件，如下：

这个项目创建了4种模式分别兼容release、beta、测试、本地环境，每种模式下有自己特定的环境变量，例如.env.local的内如如下：

# .env._local
# 透传客户端参数
VITE_NODE_ENV=local
VITE_OWNER=Tom
VITE_POSITION=广州，天河

# 私有参数，仅在vite server获取到，
# 假如你的项目包含此类敏感变量。应该将文件添加到你的 .gitignore 中，以避免它们被 git 检入。
MODE_KEY=PRIVATE_KEY_LOCAL

根据Vite的约定规则，只有以“VITE_”开头的变量才会在客户端被捕获，捕获方式为：import.meta.env.{参数名}。

至于非“VITE_”开头的变量属于私有属性，不会传递出去。假如你的项目包含此类敏感变量。应该将文件添加到你的 .gitignore 中，以避免它们被 git 检入。

完成上述配置后，我们只需要在package.json增加对应的启动命令就可以让Vite获取哪个模式来运行项目了：

{
  "name": "vite-mul-env-learn",
  "version": "0.0.0",
  "scripts": {
    "dev:local": "vite --mode _local",
    "dev:test": "vite --mode test",
    "build:beta": "vite build --mode beta",
    "build:release": "vite build --mode release",
    "lint": "eslint --fix --ext .js,.vue,ts src"
  }
}

Vite默认环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在服务器渲染环境。

这里补充说明下，DEV 和 PROD分别对应package.json中启动dev和build命令决定的，而SSR则是对应了Vite启动时设定的middlewareMode变量决定的：

const { createServer: createViteServer } = require('vite')
const vite = await createViteServer({
    server: { middlewareMode: 'ssr' }
  })

通过插件透传环境变量

很多情况下，我们的环境变量不仅仅是简单的字符串，而是通过vite服务中二次计算才能得到最终结果，有点类似Vue中computed或React中useMemo、useCallback的效果。像这类非静态的环境变量，我们需要借助插件能力来让它们也能够返回客户端，插件很多，这里推荐vite-plugin-environment，使用大概是这样子的：

You can provide a list of environment variable names to expose to your client code:

import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentPlugin(['API_KEY', 'DEBUG']),
  ],
})

And then use them as:

const apiKey = process.env.API_KEY

在这个基础上，我们还能配合模式文件进行联合判断：

import { defineConfig, ConfigEnv, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import EnvironmentPlugin from 'vite-plugin-environment';
import { fetchEnv } from './server/envUitls';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv) => {
  const env = loadEnv(mode, __dirname);
  const { proxy } = fetchEnv(env.VITE_NODE_ENV); // 设置域名和端口

  return {
    base: './',
    plugins: [
      vue(),
      EnvironmentPlugin({
        PROXY: proxy
      })
    ]
  };
});

const env = loadEnv(mode, __dirname);可以获取.env._local是所有非私密参数，接下来程序可以根据模式参数来计算最终的环境变量，通过插件返回到客户端。

fetchEnv方法可以理解成环境收集器，里面可以写逻辑让环境参数得到统一整合。

客户端环境差异定制

这块就很好理解了，无非就是通过指定方法获取环境变量，来条件渲染vue或React组件。下面做了个demo：

<script setup lang="ts">
import { ref } from 'vue';
import { proxy } from '@/api/proxy';

interface IEnv extends ImportMetaEnv {
  VITE_NODE_ENV: string;
  VITE_OWNER: string;
  VITE_POSITION: string;
}
const viteEnv: IEnv = import.meta.env;
</script>

<template>
  <div class="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <section class="main">
      <div class="card">
        <h3>①通过环境文件传入的参数</h3>
        <div class="tips">说明：只包含"VITE_"开头参数</div>
        <div>项目owner：{{ viteEnv.VITE_OWNER }}</div>
        <div>owner位置：{{ viteEnv.VITE_POSITION }}</div>
        <div>项目mode：{{ viteEnv.VITE_NODE_ENV }}</div>
      </div>
      <div class="card">
        <h3>②环境插件传递的参数</h3>
        <div class="tips">
          说明：通过vite-plugin-environment插件传递过来，一般为二次计算后的参数。假如是静态参数值则直接通过方案①传回来即可。
        </div>
        <p>服务请求域：{{ proxy }}</p>
      </div>
      <div class="card">
        <h3>③Vite环境自带参数</h3>
        <div class="tips">
          说明：Vite默认参数，参考
          <a href="https://cn.vitejs.dev/guide/env-and-mode.html#env-variables"
            >Vite环境变量</a
          >
        </div>
        <p>是否为SSR模式：{{ viteEnv.SSR }}</p>
        <p>是否为本地开发模式：{{ viteEnv.DEV }}</p>
        <p>是否为构建模式：{{ viteEnv.PROD }}</p>
        <p>当前启动命令读取的mode为：{{ viteEnv.MODE }}</p>
        <p>部署应用时的基本 URL：{{ viteEnv.BASE_URL }}</p>
      </div>
    </section>
  </div>
</template>

<style lang="less" scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main {
  display: flex;
  .card {
    margin: 10px;
    padding: 10px;
    width: 300px;
    text-align: left;
    background-color: #dbf1e7;
    font-size: 14px;
    h3 {
      margin-bottom: 0;
    }
    .tips {
      margin-bottom: 10px;
      font-size: 12px;
      color: #898989;
    }
  }
}
</style>

效果图

解决的业务场景思考

除了本文 “业务背景” 模块所说的最直观的场景外，其实还可以做很多项目工程化相关的高阶操作。

假如项目构建操作放在远程服务器进行，那么在构建打包前就可以联动服务api来生产出不同版本、不同模式的构建包，甚至可以把SSR逻辑放到这块来做，达到“千人千面”的效果。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

多环拥有 code div class Vue

有关记录转载：Vite多环境配置--让项目拥有更高定制化能力的更多相关文章

ruby-on-rails - 独立 ruby 脚本的配置文件 - 2
我有一个在Linux服务器上运行的ruby脚本。它不使用rails或任何东西。它基本上是一个命令行ruby脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。最佳答案首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg
ruby - Sinatra:运行 rspec 测试时记录噪音 - 2
Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2
我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？最佳答案 Isthisabug,or
ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2
我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
程序员如何提高代码能力？ - 2
前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源
Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2
之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m
神州数码无线产品（AC+AP）配置 - 2
注意：本文主要掌握DCN自研无线产品的基本配置方法和注意事项，能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为：adminAP默认IP地址为：192.168.1.10AP默认情况下DHCP开启AP静态地址配置：setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能：setmanagementdhcp-statusup/downAP设置默认网关：setstatic-ip-routegeteway192.168.10.254查看AP基本信息：getsystemgetmanagementgetmanaged-apgetrouteAP配
hadoop安装之保姆级教程（二）之YARN的配置 - 2
1.1.1 YARN的介绍为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模

记录转载：Vite多环境配置--让项目拥有更高定制化能力

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

业务背景

多环境场景的业务形态

如上图所示，在工程`启动 / 构建`时：

环境变量注入：一般通过命令参数模式，可在`package.json`里配置；

多模式文件：Vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为Vite的环境模式；

环境收集器：简单理解为1个函数，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出；

客户端环境差异定制化：客户端（也就是工程里面的`.vue、.ts、.tsx`等前端文件）获取到环境参数做一些特定区分逻辑；

构建和发布：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。

Vite多环境方案实现

多模式文件配置

自定义环境变量

Vite默认环境变量

通过插件透传环境变量

客户端环境差异定制

效果图

解决的业务场景思考

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

有关记录转载：Vite多环境配置--让项目拥有更高定制化能力的更多相关文章

随机推荐

记录转载：Vite多环境配置--让项目拥有更高定制化能力

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

业务背景

多环境场景的业务形态

如上图所示，在工程启动 / 构建时：

环境变量注入：一般通过命令参数模式，可在package.json里配置；

多模式文件：Vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为Vite的环境模式；

环境收集器：简单理解为1个函数，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出；

客户端环境差异定制化：客户端（也就是工程里面的.vue、.ts、.tsx等前端文件）获取到环境参数做一些特定区分逻辑；

构建和发布：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。

Vite多环境方案实现

多模式文件配置

自定义环境变量

Vite默认环境变量

通过插件透传环境变量

客户端环境差异定制

效果图

解决的业务场景思考

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

有关记录转载：Vite多环境配置--让项目拥有更高定制化能力的更多相关文章

随机推荐

如上图所示，在工程`启动 / 构建`时：

环境变量注入：一般通过命令参数模式，可在`package.json`里配置；

客户端环境差异定制化：客户端（也就是工程里面的`.vue、.ts、.tsx`等前端文件）获取到环境参数做一些特定区分逻辑；