如何使用 https 运行 Vue.js 开发服务？

Question

我正在使用 Vue-cli 使用 webpack 模板创建 vue 项目。如何在开发中使用 https 运行它：npm run dev？

Answer 1

如果您使用 vue ui 来服务您的应用程序，一个简单的解决方案是替换

 "serve": "vue-cli-service serve",

与

 "serve": "vue-cli-service serve --https true",

在您项目的package.json 文件中。

现在使用 vue ui 为您的应用程序提供服务。您可以进行更多更改。见https://cli.vuejs.org/guide/cli-service.html#using-the-binary

Answer 2

Jianwu Chen 的回答帮助了我，但为了帮助那些想要扩展答案的 cmets，我正在创建这个答案。希望对你有帮助。

问题基本上是，我们如何告诉浏览器“我知道这是一个无效的证书，但我可以接受，因为我正在本地开发一个站点。”

所以要尝试在一个地方给出完整的答案，就在这里......

首先，在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 在 cmets 中指出这一点。如果没有该行，您将收到他提到的有关::ERR_CONNECTION_REFUSED 的控制台错误。将此行作为 https 的同级添加到 devServer 将消除该错误。如果您喜欢这个答案，请确保也喜欢他的评论！

Answer 3

在 Chrome 或 Edge 中运行时，您仍会收到警告，因为证书不是受信任的证书。但是您可以通过设置以下标志在运行站点时关闭提示：

chrome://flags/#allow-insecure-localhost

这也适用于最新版本的 Edge。

Answer 4

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's location */'),
  cert: fs.readFileSync('/* replace me with cert file's location */'))
};
var server = https.createServer(options, app).listen(port);

请注意，在 webpack 模板中，http://localhost:8080 将使用opn 模块在您的浏览器中自动打开。因此，为方便起见，您最好将var uri = 'http://localhost:' + port 替换为var uri = 'https://localhost:' + port。

Answer 5

在最新的vuejs中（截至2018年5月7日），需要在项目根目录下添加一个“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

Answer 6

最简单的方法是进入 package.json 并将“dev”更改为

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

它仍然会在控制台中在http://localhost 上运行消息，但您可以通过https://localhost 访问该站点

Answer 7

在/build/webpack.dev.conf.js，到devWepackConfig 在devServer，添加

https: true