安装vite-plugin-mkcert后Webpack项目localhost无法访问求助（Windows10）

1. 检查本地hosts文件映射 #

• 用管理员权限打开记事本，访问路径 C:\Windows\System32\drivers\etc\hosts
• 确认文件中存在以下两行映射，若缺失则添加：

  127.0.0.1 localhost
  ::1 localhost
  

• 保存文件后，执行命令刷新DNS缓存：ipconfig /flushdns

2. 排查Webpack项目的HTTPS配置冲突 #

• 打开Webpack配置文件（如webpack.config.js、vue.config.js），检查devServer相关配置：
  • 若启用了HTTPS，确认证书路径是否正确——vite-plugin-mkcert生成的全局证书可能未被Webpack正确识别，可尝试临时将devServer.https设为false，测试localhost是否能正常访问
  • 若需保留HTTPS，可手动生成本地证书（如用openssl工具），然后在配置中指定证书文件：

    const fs = require('fs');
    module.exports = {
      devServer: {
        https: {
          key: fs.readFileSync('./cert/localhost.key'),
          cert: fs.readFileSync('./cert/localhost.crt')
        }
      }
    }
    

• 检查端口占用情况：执行命令 netstat -ano | findstr :[你的Webpack服务端口]，若有占用，在任务管理器中找到对应PID的进程并结束

3. 清理vite-plugin-mkcert残留证书 #

• 按下Win+R，输入certmgr.msc打开证书管理器
• 依次展开「个人」→「证书」，找到名称为localhost的证书，右键删除
• 再展开「受信任的根证书颁发机构」→「证书」，找到mkcert生成的根证书（名称通常包含mkcert前缀），右键删除
• 重启电脑确保残留配置完全清除

4. 调整网络协议优先级 #

• 打开「网络和共享中心」→「更改适配器设置」，右键当前网络连接选择「属性」
• 暂时取消勾选「Internet协议版本6 (TCP/IPv6)」，重启后测试localhost访问
• 若恢复正常，重新勾选IPv6，再次确认hosts文件中的::1 localhost配置是否正确

5. 重置Webpack项目依赖与缓存 #

• 删除项目根目录的node_modules文件夹、package-lock.json（或yarn.lock）文件
• 重新执行npm install或yarn install安装依赖
• 清理Webpack缓存：执行npx webpack --clean，或直接删除项目中的.cache等缓存目录

内容的提问来源于stack exchange，提问作者ngọc nguyễn thanh