关于.env环境变量文件的配置与来源

文章目录

  • 关于.env环境变量文件的配置与来源
    • 前言:
    • 1. 环境模式
      • Vue CLI
      • Vite
    • 2. 在`vue-cli`构建的项目中使用环境变量
    • 3. 在vite项目中使用环境变量

关于.env环境变量文件的配置与来源

前言:

相信有很多小伙伴在做vue项目的时候,在使用教程提供的模板的时候一定看到过这样的文件
关于.env环境变量文件的配置与来源_第1张图片

而他们的内容更是让人摸不着头脑,不知道是用来干嘛的(以下是vite)

# .env.development
VITE_APP_CALLBACK=http://consult-patients.itheima.net

# .env.production
VITE_APP_CALLBACK=https://cp.itheima.net

当我们在查阅资料之后,才知道,.env.development对应的是开发环境下的环境变量,.env.production对应的是生产环境下的环境变量,而在项目中引用这个变量呢?

相信各大教程也提供了相应的使用方案,就是调用node的一个全局变量来使用,但是得分情况,分什么情况呢?就是vue-clivite的情况,这两种情况对定义环境变量和使用环境变量的方式不同,详解如下

1. 环境模式

Vue CLI 和 Vite 都支持多种环境模式,这些模式主要用于为不同的开发和部署场景提供不同的配置选项。下面是它们各自支持的环境模式:

Vue CLI

Vue CLI 默认支持以下三种环境模式:

  • development:开发环境,一般用于本地开发调试。
  • production:生产环境,一般用于项目上线部署。
  • test:测试环境,一般用于执行单元测试和集成测试。

除了默认的三种环境模式外,还可以通过 .env 文件来定义其他的环境模式。例如,可以在项目根目录下创建一个 .env.staging 文件来定义一个名为 staging 的自定义环境模式。这样,可以在命令行中使用 --mode 参数来指定当前所使用的环境模式。例如,可以使用以下命令来启动一个名为 staging 的环境模式:

vue-cli-service serve --mode staging

Vite

Vite 默认支持以下两种环境模式:

  • development:开发环境,一般用于本地开发调试。
  • production:生产环境,一般用于项目上线部署。

除了默认的两种环境模式外,还可以通过 .env 文件来定义其他的环境模式。例如,可以在项目根目录下创建一个 .env.test 文件来定义一个名为 test 的自定义环境模式。这样,可以在命令行中使用 --mode 参数来指定当前所使用的环境模式。例如,可以使用以下命令来启动一个名为 test 的环境模式:

vite serve --mode test

2. 在vue-cli构建的项目中使用环境变量

  1. 定义环境变量
# 在vue-cli构建的项目中,只有使用VUE_APP_*定义的变量,才会被 webpack.DefinePlugin 嵌入到客户端侧的包中
VUE_APP_API_URL = http://localhost:8080/api
  1. 你可以在项目中这样使用这个变量
console.log( process.VUE_APP_URL )
  1. 除了VUE_APP_*定义的变量之外,在VUE-cli项目中还有两个始终可用的全局变量NODE_ENVBASE_URL

    • NODE_ENV:会是 "development""production""test" 中的一个。具体的值取决于应用运行的模式。

    • BASE_URL:- 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。

    • 关于这两个变量我也举了一个使用的例子供大家参考

      // vue.config.js
      module.exports = {
        // 根据当前环境来决定 publicPath 的路径
        publicPath: process.env.NODE_ENV === 'production'
          ? '/production-sub-path/'
          : '/'
      }
      
    • 最后一个小点,就是有时候我们有时候有一些不该提交到代码仓库中的变量的时候,尤其是代码托管到公共仓库的时候,这时候为了造成不必要的麻烦,我们应该使用.env.local来代替,.local的意思是可以被指定环境加载,但被git忽略,像其它模式的到环境变量,也可以添加.local来实现这个效果

3. 在vite项目中使用环境变量

参考信息 环境变量和模式

  1. 首先,在vite中,使用环境变量是通过import.meta.env.xxx来引用,值得注意的是,它不支持动态引用,即import.meta.env[xxx]是无效的,请使用静态字符串

  2. vite也提供了许多的默认环境变量

    • 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} 应用是否运行在 server 上。
  3. 只有VITE_*前缀的变量才会以字符串的形式暴露给客户端源码

    # .env.development
    VITE_API_URL = http://localhost:8080/apis
    
    # .env.production
    VITE_API_URL = https://test.api.com/apis
    

    使用:

    console.log(import.meta.env.VITE_API_URL)		// 这行代码会在不同的环境变量下打印不同的值
    

m/apis


使用:

```js
console.log(import.meta.env.VITE_API_URL)		// 这行代码会在不同的环境变量下打印不同的值
  1. 另外,vite是支持自定义变量前缀的,我这里就不多赘述了,增加心智负担,详情请看 共享配置 | Vite 官方中文文档 (vitejs.dev)

你可能感兴趣的:(环境搭建,脚手架,环境变量,vue.js,前端,javascript)