Как игнорировать настройки devServer в vue.config.js при сборке для промежуточной среды? - PullRequest
0 голосов
/ 27 марта 2019

Я создаю приложение с помощью Vue.Мне нужно было https работать в моей локальной среде для разработки и тестирования.Я успешно создал необходимые сертификаты , следуя этому руководству .Чтобы заставить их использовать сервер разработки, я скопировал файлы server.key и server.crt в корень моего проекта и оставил файл rootCA.pem в ~/.ssh.Я добавил запись в /etc/hosts в псевдоним localhost для моего домена, например:

127.0.0.1 example.test

Затем я отредактировал vue.config.js в корне моего проекта, чтобы он выглядел так:

const fs = require('fs')

module.exports = {
  devServer: {
    host: 'example.test',
    https: {
      key: fs.readFileSync('./server.key'),
      cert: fs.readFileSync('./server.crt'),
      ca: fs.readFileSync(process.env.HOME + '/.ssh/rootCA.pem')
    }
  }
}

Это работает отлично локально.Моя проблема связана с моим промежуточным сервером.

Мой промежуточный сервер работает под управлением Ubuntu (16.04) и имеет действительный сертификат SSL (т.е. не самоподписанный), установленный с использованием certbot (LetsEncrypt).Мой проект является статическим внешним интерфейсом, поэтому я обслуживаю его с nginx, настроенным так, чтобы он указывал на каталог /dist и сделал проект доступным на staging.example.com.Это все работало нормально, прежде чем я добавил devServer config в vue.config.js выше.

То, что я ожидаю , произойдет:

Когда я собираю проект для подготовкито есть

npm run build -- --mode staging

Я ожидал, что он проигнорирует секцию конфигурации devServer, начиная с NODE_ENV === 'production' (задано в моем файле .env.staging).

Что на самом деле происходит:

Процесс сборки завершается сбоем, сообщая, что:

Error loading vue.config.js:
Error: ENOENT: no such file or directory, open './server.key'

Вопрос: Как заставить процесс сборки игнорировать раздел devServer в vue.config.js при сборке для "промежуточной" подготовки"или" производство? "

1 Ответ

0 голосов
/ 27 марта 2019

vue.config.js автоматически не определяет окружающую среду.Как указано в документации по конфигурации Vue CLI: :

Если вам нужно условное поведение в зависимости от среды или вы хотите напрямую изменить конфигурацию, используйте функцию (которая будетленивый вычисляется после установки переменных env).Функция получает разрешенный конфиг в качестве аргумента.Внутри функции вы можете либо напрямую изменять конфигурацию, либо возвращать объект, который будет объединен.

Как на самом деле это было не сразу понятно для меня.Вот что получилось:

const fs = require('fs')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        host: 'qzuku.test',
        // https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec
        https: {
          key: fs.readFileSync('./qzukuDevServer.key'),
          cert: fs.readFileSync('./qzukuDevServer.crt'),
          ca: fs.readFileSync(process.env.HOME + '/.ssh/rootDevCA.pem')
        }
      }
    }
  }
}

Надеюсь, это поможет!

...