Awesomefont图标本地正常显示但服务器端无法加载如何解决？

根因 #

问题核心是打包配置的静态资源公共路径（publicPath）设置错误，本地开发时站点部署在根路径，资源寻址正常；部署到服务器二级目录/sitename/后，打包工具还是按照根路径生成静态资源引用地址，导致字体文件从https://site.nl/fonts/加载而非实际存放的https://site.nl/sitename/fonts/。

解决方案 #

1. 动态配置publicPath #

根据运行环境动态设置静态资源公共路径，适配本地和服务器场景：

• 本地开发环境设置为 /
• 生产部署环境设置为 /sitename/

不同打包工具的配置示例：

Webpack

修改webpack.config.js：

module.exports = {
  output: {
    // 按环境动态设置publicPath
    publicPath: process.env.NODE_ENV === 'production' ? '/sitename/' : '/'
  },
  module: {
    rules: [
      // 字体文件处理规则保持默认即可，会自动继承publicPath配置
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  }
}

Vue CLI

修改vue.config.js：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/sitename/' : '/'
}

Vite

修改vite.config.js：

import { defineConfig } from 'vite'
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/sitename/' : '/'
})

2. 通用适配方案（可选） #

如果你的站点可能部署到任意层级目录，可以直接将publicPath设置为./，所有静态资源会以当前HTML文件的路径为基准寻址，无需随部署目录修改配置。

注意：如果项目使用前端路由history模式，相对路径可能导致路由跳转后资源寻址异常，该场景优先使用环境变量动态配置绝对路径。

3. 验证生效 #

调整配置后重新打包，检查生成的CSS文件中字体引用路径，确认已变更为/sitename/fonts/xxx.woff2或../fonts/xxx.woff2格式即可，部署后无需额外配置虚拟目录，本地和服务器环境均可正常加载字体图标。

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