Я использую Vue-cli для создания проекта vue с шаблоном webpack. как запустить его с помощью https в разработке, используя: npm run dev
?
Как запустить 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