Предисловие

Vue.js — это популярная платформа JavaScript, которая предоставляет множество инструментов и функций, помогающих разработчикам создавать эффективные и удобные в обслуживании веб-приложения. Одним из важных инструментов являются переменные среды, которые позволяют настраивать разные параметры и опции в разных средах. В этом блоге мы расскажем, как устанавливать переменные среды в приложении Vue и как использовать их в средах разработки, производства и тестирования.

Текстовый контент

1. Что такое переменные среды?

Переменные среды — это динамический набор значений в операционной системе, который может влиять на поведение приложения. Эти переменные можно задавать и изменять во время работы приложения и могут содержать различную информацию, такую ​​как строки подключения к базе данных, ключи API, уровни журналов и т. д. В приложениях Vue переменные среды обычно используются для настройки конечных точек API, имен хостов, номеров портов и т. д. в различных средах.

2. Как установить переменные среды в Vue

Vue.js предоставляет встроенную систему переменных среды, которая упрощает использование переменных среды в вашем приложении. Эта система основана на DefinePlugin от Webpack, который вводит переменные среды в приложение во время компиляции. Чтобы установить переменные среды, вы можете создать файл .env в корневом каталоге проекта, который содержит пары ключ-значение одной или нескольких переменных среды. Например:

VUE_APP_API_ENDPOINT=http://api.example.com
VUE_APP_LOG_LEVEL=debug

Имена этих переменных должны заканчиваться наVUEAPPначало,Это соглашение Vue.js. Эти переменные можно использовать в компонентах Vue.,Например:

<template>
  <div>
    <p>API Endpoint: {{ $env.VUE_APP_API_ENDPOINT }}</p>
    <p>Log Level: {{ $env.VUE_APP_LOG_LEVEL }}</p>
  </div>
</template>

Здесь используется объект $env Vue.js, который содержит значения всех переменных среды. Обратите внимание, что эти переменные можно использовать только в компонентах Vue, но не в модулях JavaScript.

3. Как использовать переменные среды в среде разработки

В среде разработки нам часто приходится использовать разные конечные точки API и имена хостов. Для удобства Vue.js предоставляет файл по умолчанию .env.development, в котором можно задавать переменные для среды разработки. Например:

VUE_APP_API_ENDPOINT=http://localhost:8000

Этот файл автоматически загружается Webpack и вводится в приложение. В среде разработки эти переменные можно использовать для настройки приложения Vue. Например, используйте библиотеку Axios для выполнения HTTP-запроса в компоненте Vue:

import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    axios.get(`${process.env.VUE_APP_API_ENDPOINT}/posts`)
      .then(response => {
        this.posts = response.data
      })
  }
}

Здесь используется объектprocess.env, который содержит значения всех переменных среды. В среде разработки значение VUE_APP_API_ENDPOINT равно http://localhost:8000, поэтому Axios инициирует HTTP-запрос к этой конечной точке.

4. Как использовать переменные среды в производственной среде

В производственной среде нам часто приходится использовать разные конечные точки API и имена хостов. Для удобства Vue.js предоставляет файл .env.production по умолчанию, в котором можно задавать переменные для производственной среды. Например:

VUE_APP_API_ENDPOINT=https://api.example.com

Этот файл будет загружен Webpack во время сборки и внедрен в приложение. В производственной среде эти переменные можно использовать для настройки приложения Vue. Например, используйте библиотеку Axios для выполнения HTTP-запроса в компоненте Vue:

import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    axios.get(`${process.env.VUE_APP_API_ENDPOINT}/posts`)
      .then(response => {
        this.posts = response.data
      })
  }
}

Здесь используется объектprocess.env.,Он содержит значения всех переменных среды. в производственной среде,VUE_APP_API_ENDPOINTЗначениеhttps://api.example.com,Поэтому Axios инициирует HTTP-запрос к этой конечной точке.

5. Как использовать переменные среды в тестовой среде

В среде тестирования нам часто приходится использовать разные конечные точки API и имена хостов. Для удобства Vue.js предоставляет файл .env.test по умолчанию, в котором можно задать переменные для тестовой среды. Например:

VUE_APP_API_ENDPOINT=http://test.example.com

Этот файл будет загружен Webpack во время тестирования и внедрен в приложение. В тестовой среде эти переменные можно использовать для настройки приложения Vue. Например, используйте библиотеку Axios для выполнения HTTP-запроса в компоненте Vue:

import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    axios.get(`${process.env.VUE_APP_API_ENDPOINT}/posts`)
      .then(response => {
        this.posts = response.data
      })
  }
}

Здесь используется объектprocess.env.,Он содержит значения всех переменных среды. в тестовой среде,VUE_APP_API_ENDPOINTЗначениеhttp://test.example.com,Поэтому Axios инициирует HTTP-запрос к этой конечной точке.

6. Как использовать переменные среды в CI/CD

В CI/CD нам часто приходится использовать разные конечные точки API и имена хостов. Для удобства Vue.js предоставляет файл .env.ci по умолчанию, в котором можно задавать переменные для среды CI/CD. Например:

VUE_APP_API_ENDPOINT=https://ci.example.com

Этот файл будет загружен Webpack во время CI/CD и внедрен в приложение. В CI/CD эти переменные можно использовать для настройки приложения Vue. Например, используйте библиотеку Axios для выполнения HTTP-запроса в компоненте Vue:

import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    axios.get(`${process.env.VUE_APP_API_ENDPOINT}/posts`)
      .then(response => {
        this.posts = response.data
      })
  }
}

Здесь используется объектprocess.env.,Он содержит значения всех переменных среды. В CI/CD,VUE_APP_API_ENDPOINTЗначениеhttps://ci.example.com,Поэтому Axios инициирует HTTP-запрос к этой конечной точке.

Подвести итог

Использование переменных среды в приложениях Vue.js позволяет нам легко настраивать различные параметры и параметры в разных средах. В этой статье мы рассказали, как устанавливать переменные среды в приложении Vue, и продемонстрировали, как использовать их в средах разработки, производства, тестирования и CI/CD.

Я участвую в четвертом выпуске специального тренировочного лагеря Tencent Technology Creation 2023 года с эссе, получившими награды. Приходите и разделите приз со мной!