Упаковка подокружения Vue для интерфейсных проектов

Vue.js

Среда развертывания внешнего интерфейса часто представляет собой несколько сред, наиболее знакомые из которых: тестовая среда, производственная среда. В разных средах адрес доменного имени API-интерфейса часто отличается, поэтому будет проблема.В разных средах нам нужно вручную изменить адрес доменного имени, прежде чем проект будет упакован и развернут.Не очень ли это хлопотно , и даже забыть изменить или отношения В противном случае, что мне делать?Не паникуйте, сегодня я буду говорить о том, как Vue упаковывает эти вещи в соответствии с окружением.

Упаковка подсреды Vue-cli 2.x

  • Шаги упаковки версии Vue-cli 2.x можно разделить на среды.кликните сюдаСтатья коллеги про упаковку в мультисреде vue-cli 2.x однозначно борец в галантерее, поэтому постарайтесь не повторять конструкцию колеса. точек Среда в основном упакована.

Упаковка подокружения vue-cli 3.0

  • Во-первых, по старым правилам, код может выдавать инструкции, и не более чем bb, поэтому мы начали непосредственно с кода.
    1.package.json добавить команду
"scripts": {
    "dev": "vue-cli-service serve", //本地运行，会把process.env.NODE_ENV的值设置为'development'(默认)
    "build:dev": "vue-cli-service build --mode dev",//dev模式下打包(测试服打包)，会把process.env.NODE_ENV的值设置为'.env.dev文件中NODE_ENV声明的值'
    "build": "vue-cli-service build"//正式服打包，会把process.env.NODE_ENV的值设置为'production'(默认)
  },

Уведомление:

2.--mode 'name' должно соответствовать полю 'mode name' в .env.'name' на шаге 2 ниже, это обязательно.


       2. Добавьте файл .env.'name' в корневой каталог проекта, вот файл .env.dev

  • Ниже приведены переменные среды, определенные в файле .env.dev (упаковка по среде зависит от того, какую пользовательскую переменную среды нужно достичь).

       3. Приложение в нескольких средах (в качестве примера возьмем адрес доменного имени интерфейса API в разных производственных средах)

<!--request.js-->
let env = process.env.NODE_ENV === 'development' ? 'development': process.env.VUE_APP_TITLE;
const baseURL = (env === 'development' || env === 'build_dev') ? store.state.testURL : store.state.baseURL;

       4. Упаковка

npm run build:dev 测试服打包(package.json 中定义)
npm run build 正式服打包
  • Различные команды упаковки будут загружать переменные среды в соответствующих режимах, чтобы мы могли различать среду упаковки, изменяя process.env.NODE_ENV и process.env.VUE_APP_TITLE для достижения упаковки проекта в разных средах.

notes

  • Есть несколько моментов, на которые стоит обратить внимание, которые объясняются здесь.
    1. Упаковка vue-cli 3.0 в нескольких средах в основном выигрывает от поддержки файла .env в корневом каталоге проекта.Эта часть может бытькликните сюдаОзнакомьтесь с официальной документацией, она очень подробная и очень хорошая.
  1. Шаг 2. Значение переменной среды NODE_ENV в файле env может быть «разработка», «производство», «тест», здесь я определяю его как «производство», потому что это для process.env.NODE_ENV === при открытии упаковка веб-пакета Структура пакета и размер «производства» и других случаев различны. Этот заинтересованный друг может упаковать и попробовать отдельно, и это будет ясно с первого взгляда.

На этом способ упаковки проектов в разные окружения в vue-cli 3.0 в основном завершен.По поводу реализации небольших программ похожего на динамическое переключение доменных имен интерфейсов в разных окружениях мой брат думает следующее.Можем обсудить и обсудить, хе-хе.


------------------Великолепная разделительная линия------------- --------------------

Небольшие программы динамически переключаются доменные имена по окружающей среде

  • Апплет __WxConfig.envVersion можно использовать для различения пробной версии небольшой программы, платы разработки и официальной версии. envVersion тип Строка

    envVersion: 'релиз', //официальная версия

    END

    Если вы не наберете несколько шагов, вы не сможете пройти тысячу миль; если вы не наберете небольшой ручей, вы не сможете создать реку или море.

Категории