uni-app H5打包设置base后图标字体不显示

uni-app H5打包设置base后图标字体不显示

操作步骤：

  • uniapp+uni-ui 设置h5->router->base:’/pc’后打包无法访问图标字体，如设置‘/’后正常，但无法去掉路由中的#

预期结果：

  • 设置h5->router->base后去掉#并正常访问

实际结果：

  • 设置h5->router->base后去掉#网站正常访问，但图标字体显示失败

bug描述：

  • uniapp+uni-ui 设置h5->router->base:’/pc’后打包无法访问图标字体，如设置‘/’后正常，但无法去掉路由中的#
4 回复

app.vue 文件加入css 标签

<style lang="scss"> [@import](/user/import) "@/common/font/iconfont.css"; </style>

更多关于uni-app H5打包设置base后图标字体不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


按照指示加入对应代码后报错 Module build failed (from ./node_modules/postcss-loader/src/index.js): [HBuilder] 22:19:41.848 Error: ENOENT: no such file or directory, stat ‘E:\www\other\vue\zxwd\zxwd-pc\common\font\iconfont.css’

我用的是uniapp的UI库uni-ui这个，并没有自定义引入其他icon

在 uni-app 中，如果你在 H5 打包时设置了 base 路径，可能会导致图标字体无法正常显示。这是因为 base 标签会改变页面上所有相对路径的基准路径，而字体文件的路径可能会因此受到影响。

解决方法

  1. 使用绝对路径： 确保字体文件的路径是绝对路径，而不是相对路径。这样可以避免 base 标签对路径的影响。

    [@font-face](/user/font-face) {
  font-family: 'MyFont';
  src: url('/static/fonts/myfont.woff2') format('woff2'),
       url('/static/fonts/myfont.woff') format('woff');
}

  2. 动态设置 base 路径： 如果你需要在运行时动态设置 base 路径，可以在 index.html 中通过 JavaScript 动态设置 base 标签的 href 属性。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>My App</title>
  <script>
    document.write('<base href="' + (window.__basePath || '/') + '" />');
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

    然后你可以在应用中通过 window.__basePath 来动态设置 base 路径。

  3. 检查字体文件路径： 确保字体文件路径正确，并且文件确实存在于指定的路径中。

  4. 使用 CDN： 如果可能的话，将字体文件托管在 CDN 上，并使用 CDN 的 URL 来引用字体文件。

    [@font-face](/user/font-face) {
  font-family: 'MyFont';
  src: url('https://cdn.example.com/fonts/myfont.woff2') format('woff2'),
       url('https://cdn.example.com/fonts/myfont.woff') format('woff');
}

  5. 使用 publicPath 配置： 如果你使用 webpack 进行打包，可以通过配置 publicPath 来指定静态资源的基准路径。

    // vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
};
回到顶部