Vue.js懒加载组件中Google Material Symbols无法正常使用求助

以下是解决懒加载组件中图标不渲染问题的可行方案：

• 确保字体文件正确打包与访问
  检查打包后的静态资源目录（如dist）是否包含Material Symbols的.woff2格式字体文件。如果字体路径不正确，可通过项目构建配置调整资源处理规则：

  • Vite项目：在vite.config.js中添加字体资源包含规则

    export default defineConfig({
      assetsInclude: ['**/*.woff2'],
    })
    

  • Vue CLI项目：在vue.config.js中配置字体加载器

    module.exports = {
      chainWebpack: config => {
        config.module
          .rule('fonts')
          .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
          .use('url-loader')
          .loader('url-loader')
          .options({
            limit: 8192,
            name: 'fonts/[name].[hash:8].[ext]'
          })
      }
    }
    

• 预加载字体文件
  在项目根目录的index.html中添加字体预加载标签，确保字体在懒加载组件渲染前完成加载：

  <link rel="preload" href="/assets/fonts/material-symbols-rounded.woff2" as="font" type="font/woff2" crossorigin>
  

  注意：路径需与打包后字体文件的实际位置一致，可根据项目构建输出调整。

• 在懒加载组件内导入样式（快速验证方案）
  若全局导入的样式未生效，可在懒加载组件（如AboutView.vue）的样式区域再次导入Material Symbols样式：

  <style scoped>
  @import 'material-symbols/rounded.scss';
  </style>
  

  此方法可绕过全局样式加载时机问题，快速验证图标是否能正常渲染。

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