Vue3项目导入FontAwesome遇504网关超时问题求助

开发者阿泽

2026-8-12

Vue3 + Vite 集成FontAwesome时出现504网关超时导致应用崩溃

问题详情

给Vue3项目添加FontAwesome后，应用直接崩溃
导入FontAwesome相关模块时，浏览器网络面板显示请求http://localhost:5173/node_modules/.vite/deps/@fortawesome_free-solid-svg-icons.js?v=de8afee4返回504网关超时
确认node_modules下的@fortawesome目录存在，且已尝试删除并重装node_modules，问题依旧存在

当前代码与配置

main.js中的导入代码

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

package.json内容

{
  "name": "litreach",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.2",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.2",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0",
    "vite": "^3.1.8"
  }
}