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

Question

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

原文由 Raed Alahmad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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'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 。

原文由 choasia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在最新的 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

原文由 Jianwu Chen 发布，翻译遵循 CC BY-SA 4.0 许可协议