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

Question

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

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以方便使用。

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

Answer 3

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

https: true

Answer 4

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

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

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