安装Surfshark VPN后Localhost无法连接，React预览异常

一、先解决终端SWC核心依赖错误（根源问题） #

终端中@swc/wasm无法解析、.node文件无对应loader的错误，是导致Vite服务异常的核心原因，优先处理：

1. 彻底清理依赖并重新安装

   • 执行命令删除旧依赖与锁文件：

     rm -rf node_modules package-lock.json
     npm cache clean --force
     

   • 重新安装项目依赖：

     npm install
     

2. 修复ARM64架构下的SWC适配问题（MacBook Pro M系列）

   • 先卸载现有@swc/core：

     npm uninstall @swc/core
     

   • 指定ARM64架构重新安装：

     npm config set arch arm64
     npm install @swc/core --save-dev
     

3. 切换Vite React插件到Babel（绕过SWC问题）
   如果上述方法无效，直接禁用SWC，改用Babel编译：
   在项目根目录的vite.config.js中修改配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [
       react({
         // 禁用SWC，使用Babel编译
         swc: false
       })
     ]
   })
   

二、解决Localhost无法连接的问题 #

1. 检查端口占用情况

   • 查看5173端口是否被其他进程占用：

     lsof -i :5173
     

   • 如果有结果，杀死对应进程（替换<PID>为输出中的进程ID）：

     kill -9 <PID>
     

2. 强制Vite绑定到127.0.0.1
   在vite.config.js中添加server配置：

   export default defineConfig({
     server: {
       host: '127.0.0.1',
       port: 5173,
       strictPort: true // 端口被占用时直接报错，避免自动切换
     }
   })
   

3. 检查系统Hosts文件

   • 打开终端编辑hosts文件：

     sudo nano /etc/hosts
     

   • 确保存在以下行，没有则添加：

     127.0.0.1       localhost
     ::1             localhost
     

   • 保存退出：按Ctrl+O回车确认，再按Ctrl+X。

三、关于VSCode Live Server的问题 #

Live Server并非为Vite这类现代前端构建工具设计，无法正确处理JSX模块的MIME类型，建议直接使用Vite自带的开发服务器（执行npm run dev）。如果一定要用Live Server：

1. 在VSCode设置中添加自定义MIME类型：
   • 打开设置（快捷键Cmd+,），搜索Live Server: Custom MIME Types
   • 添加配置：{ ".jsx": "application/javascript" }

内容的提问来源于stack exchange，提问作者oddfather