1. Переменные среды и шаблоны
В процессе разработки проекта, при нормальных обстоятельствах, будет локальная среда разработки, среда тестовой линии, официальная онлайн-среда линии и т. д. Конфигурация различных сред будет отличаться, например адрес нашего сервера, адрес интерфейса , и так далее. Итак, мы должны различать, затем нам нужно настроить переменные среды и режимы для управления ими.
Официальная документация:process.v uejs.org/this/expensive/mo…
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
Глядя на официальную инструкцию, это означает, что в разных средах будут загружаться разные файлы.Например, мы пишем:
.env # 会在所有的环境中被载入
.env.local # 会在所有环境中载入，但只限于本地，不会被git跟踪，git会忽略掉它
.env.development # 只在开发环境中被载入
.env.production # 只在生产环境中被载入
.env.development.local # 会在本地开发环境中载入，不会被git跟踪，git会忽略掉它
Эти переменные среды устанавливаются в корневом каталоге проекта.Если переменные записаны, то при выполнении соответствующих команд будут загружаться разные файлы в соответствии с разными средами, чтобы переменные в файлах можно было правильно прочитать. Приоритет загрузки:
.env.[mode].local > .env.[mode] > .env
2. 3 режима
По умолчанию проект Vue CLI имеет три режима:
development # 模式用于 vue-cli-service serve
production # 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test # 模式用于 vue-cli-service test:unit
Мы можем установить переменные среды, характерные для определенного режима, добавив суффикс к файлу .env, что означает, что определенные файлы будут загружаться только в определенном режиме, например: Файлы .env.development будут загружаться только в режиме разработки.
Конечно, мы можем изменить режим по умолчанию с помощью параметров. Измените с помощью --mode, за которым следует указанное имя режима, --mode development. Например, мы хотим использовать переменные среды разработки при сборке.
"build": "vue-cli-service build --mode development"
// 或者我们可以新加入一个：
"dev-build": "vue-cli-service build --mode development"
В-третьих, использование переменных среды в коде
Переменные, начинающиеся с VUE_APP_, могут быть вставлены только в статические клиентские пакеты webpack.DefinePlugin. Таким образом, вы можете получить к ним доступ в коде приложения:
console.log(process.env.VUE_APP_SECRET)
Конечно, в дополнение к пользовательским переменным VUE_APP_* есть две специальные переменные, которые мы всегда можем использовать:
NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
В-четвертых, практика настройки
Сначала мы создаем .env, .env.development, .env.development.local и .env.production в корневом каталоге, и их коды:
// env
// 这里放置共有的环境变量
VUE_APP_URL=eeeeee
VUE_APP_text=zheshism
// env.production
// 这里放置生产环境变量
NODE_ENV=production
VUE_APP_URL=pppppp
// env.development
// 这里放置开发环境变量
NODE_ENV=development
VUE_APP_URL=dddddddd
// env.development.local
// 这里放置开发环境本地有差异性变量
NODE_ENV=development.local
VUE_APP_URL=dddlllll
При использовании на страницах, таких как страница Home.vue
Когда мы запускаем команду npm run serve, по умолчанию используется режим разработки, который загружает созданные нами файлы .env, .env.development, .env.development.local.
Приоритет загрузки в зависимости от среды, т.е. .env.development.local > .env.development > приоритет .env.
Наконец, он отображает содержимое .env.development.local: Рисунок:
2. Междоменные настройки при разработке
Если у нас есть отдельный API сервера разработки бэкенда и мы хотим отправлять API-запросы под одним и тем же доменным именем, мы можем настроить кросс-доменность, а можем настроить свои собственные потребности в соответствии с документацией.Woohoo. Веб-пакет JS.com/config и как ATI…
3. Разделить код SplitChunksPlugin
Эта конфигурация слишком много, я написал отдельную статью, чтобы представить ее.nuggets.capable/post/684490…