先在项目根目录下,通过shell命令生成证书:
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
运行命令后一直按回车就行,最终会生成cert.pem和key.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来看效果了: