产品小哥提需求让修改线上一个低版本的vue项目代码，现在公司接口使用的是https协议，线上的版本是http协议，自此走上了配置vue: https启动的道路

1.

image.png

修改build文件夹下的dev-server.js文件

require('./check-versions')();
const config = require('../config');
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
const opn = require('opn'); //自动打开浏览器 模块
const path = require('path');
const express = require('express'); //Server服务器框架
const webpack = require('webpack');
const proxyMiddleware = require('http-proxy-middleware'); //单线程Node.js代理中间件，用于连接，快速和浏览器同步
const webpackConfig = require('./webpack.dev.conf');

const https = require('https');
const fs = require('fs');
const privateKey  = fs.readFileSync(path.join(__dirname, './cert/STAR.pinming.org.pem'));
const certificate = fs.readFileSync(path.join(__dirname, './cert/STAR.pinming.org.crt'));
const credentials = {key: privateKey, cert: certificate};

// default port where dev server listens for incoming traffic
const port = process.env.PORT || config.dev.port;
const httpsPort = config.dev.httpsPort || 443;
const ip = config.dev.ip;

// 是否自动打开浏览器
const autoOpenBrowser = !!config.dev.autoOpenBrowser;
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
const proxyTable = config.dev.proxyTable;

const app = express();
const compiler = webpack(webpackConfig); //调用webpack并把配置传递过去

// 使用 webpack-dev-middleware 中间件
const devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
});

const hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
});
// webpack插件，监听html文件改变事件
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
});

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  let options = proxyTable[context];
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
});

// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')());

// serve webpack bundle output
app.use(devMiddleware);

// 启用热加载 and state-preserving
// compilation error display
app.use(hotMiddleware);

// 加载静态的资源
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'));

const uri = `http://${ip}:${port}`;
const httpsUri = `https://${ip}:${httpsPort}`;

devMiddleware.waitUntilValid(function () {
  console.log('> Listening at ' + uri + '\n')
  console.log('> Listening at ' + httpsUri + '\n')
});
module.exports = app.listen(port, (err) => {});

const httpsServer = https.createServer(credentials, app);
httpsServer.listen(httpsPort, function() {
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(httpsUri)
  }
});

精髓在这里

const https = require('https');
const fs = require('fs');
const privateKey  = fs.readFileSync(path.join(__dirname, './cert/STAR.xxx.org.pem'));
const certificate = fs.readFileSync(path.join(__dirname, './cert/STAR.xxx.org.crt'));
const credentials = {key: privateKey, cert: certificate};

const port = process.env.PORT || config.dev.port;
const httpsPort = config.dev.httpsPort || 443;
const ip = config.dev.ip;

const uri = `http://${ip}:${port}`;
const httpsUri = `https://${ip}:${httpsPort}`;

module.exports = app.listen(port, (err) => {});

const httpsServer = https.createServer(credentials, app);
httpsServer.listen(httpsPort, function() {
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(httpsUri)
  }
});

webpack官方文档

 https: {
    cert: fs.readFileSync("path-to-cert-file.pem"),
    key: fs.readFileSync("path-to-key-file.pem"),
    cacert: fs.readFileSync("path-to-cacert-file.pem")
  }

即 如果需要使用https启动，需要读取证书，webpack提供了自签名证书，官方文档有说明：

image.png

也可以使用自己的证书。

2. config文件夹下 index.js文件 配置 devServer启动https：true

image.png

3 配置好之后启动，一开始出现了npm run dev启动正常不报错，但是界面上只显示 /GET 的情况。说明文件路径不对，没有加载到文件，修改配置文件config文件夹下的index.js dev=>assetsPublicPath属性

image.png

重新启动，页面就好啦

4 访问https协议，谷歌浏览器会提示网站不安全，阻止访问。

可以在chrome浏览器中把自己的域名过滤掉
chrome://net-internals/#hsts

image.png

image.png

大功告成！

image.png