Question

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

Answer 1

在最新的vuejs中（截至2018年5月7日），你需要添加一个＆＃34; vue.config.js＆＃34;在项目根目录中：

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 2

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

https: true

Answer 3

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 4

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

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

这也可以在最新版本的Edge中使用。

Answer 5

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

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

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

Answer 6

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'),
        }
    }
}

您显然可以在其中添加其他内容，但主要的是您拥有带有密钥和证书子代的https。现在，您需要指向证书文件所在的位置。

我们将简单地将带有密钥和证书的对象传递给https，而不是将https设置为true。

我们告诉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），您应该一切顺利。确保您更新文件名以使其匹配。

Answer 7

如果您正在使用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

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

7 个答案: