vue2测试环境如何开启https

218 阅读1分钟

先在项目根目录下,通过shell命令生成证书:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

运行命令后一直按回车就行,最终会生成cert.pemkey.pem这2个证书文件。

然后在项目根目录的vue.config.js,如下配置devServer:

const fs = require('fs');
module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        public: 127.0.0.1:8080', // 127.0.0.1换成自己的服务器ip
        https: {
          key: fs.readFileSync('./key.pem'),
          cert: fs.readFileSync('./cert.pem'),
        },
    },
    filenameHashing: true,
    chainWebpack: config => {
        config.output.filename = '[name].[contenthash].js'; // 设置 JS 文件名
        config.output.chunkFilename = '[name].[contenthash].js'; // 设置 chunk 文件名
    },
    configureWebpack: {
        optimization: {
            splitChunks: {
                chunks: 'all',
                maxSize: 500*1024,  // 设置拆分大小阈值
                // maxInitialRequests: 5,
                automaticNameDelimiter: '-',
            }
        }
    }
};

最后就可以npm serve来看效果了:

在这里插入图片描述