Как запустить Vue.js dev с помощью https?

Ответ 1

В шаблоне Webpack используется express как сервер для разработки. Так что просто замените

var server = app.listen(port)

со следующим кодом в build/dev-server.js.

var https = require('https');
var fs = require('fs');
var options = {
  key: fs.readFileSync('/* replace me with key file location */'),
  cert: fs.readFileSync('/* replace me with cert file location */'))
};
var server = https.createServer(options, app).listen(port);

Обратите внимание, что в шаблоне webpack http://localhost:8080 будет автоматически открываться в вашем браузере с помощью opn. Поэтому вам лучше заменить var uri = 'http://localhost:' + port на var uri = 'https://localhost:' + port для удобства.

Ответ 2

В последней версии vuejs (по состоянию на 7 мая 2018 г.) вам нужно добавить "vue.config.js" в корневой каталог проекта:

vue.config.js:

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8085, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
  },
}

В этом файле установите значение: https: true

Ответ 3

В /build/webpack.dev.conf.js, до devWepackConfig в devServer, добавьте

https: true

Ответ 4

Ответ Jianwu Chen помог мне, но чтобы помочь тем в комментариях, которые хотели получить расширенный ответ, я создаю этот ответ. Надеюсь, это поможет.

В основном, вопросы заключаются в том, как нам сообщить браузерам, что "я знаю, что это недействительный сертификат, но я согласен с ним, потому что я разрабатываю сайт локально".

Итак, чтобы попытаться сделать полный ответ в одном месте, вот оно...

Во-первых, внутри vue.config.js убедитесь, что вы включили

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/example.com+5-key.pem'),
          cert: fs.readFileSync('./certs/example.com+5.pem'),
        },
        public: 'https://localhost:8080/'
    }
}

Там, очевидно, могут быть и другие вещи, но главное, что у вас есть https с детьми ключа и сертификата. Теперь вам нужно указать, где находится файл сертификата.

Вместо того, чтобы просто установить для https значение true, мы передаем объект с ключом и сертификатом для https.

Мы сообщаем vue cli, что хотим использовать именно этот сертификат и ключ.

Как мы можем получить этот сертификат и ключ? Что ж, мы должны его создать.

К счастью, есть инструмент, который помогает сделать это легко: https://mkcert.dev (в настоящее время указывает на https://github.com/FiloSottile/mkcert)

Вы можете установить его, следуя инструкциям в GitHub. Я лично только что получил последнюю версию: https://github.com/FiloSottile/mkcert/releases

Затем следуйте инструкциям:

mkcert -install

с последующим:

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

Это создаст файлы в каталоге.

Скопируйте файлы в вашу исходную папку, указанную в vue.config.js выше (то есть. /cert), и все будет хорошо. Убедитесь, что вы обновили имена файлов, чтобы они соответствовали.

Обновление: Также обратите внимание, что в конфигурации есть:

public: 'https://localhost:8080/'

Спасибо @mcmimik за то, что указал на это в комментариях. Без этой строки вы получите сообщение об ошибке консоли, о которой он упоминал: :: ERR_CONNECTION_REFUSED. Добавление этой строки в devServer в качестве родственного элемента для https приведет к тому, что эта ошибка будет устранена. Если вам нравится этот ответ, не забудьте также понравиться его комментарий!

Ответ 5

Самый простой способ - перейти в package.json и изменить "dev" на

 "dev": "webpack-dev-server --inline --progress  --https --config build/webpack.dev.conf.js",

он все равно даст сообщение на http://localhost в консоли, но вы можете получить доступ к сайту на https://localhost