Question

我在反应应用程序中加载simplelineicons字体时遇到问题。当从子组件刷新页面时会出现问题。当从父组件刷新页面时，我看到字体文件已正确加载。

这是代码：在Full.js中

<Switch>
    <Route path="/dashboard" component={Dashboard}/>
    <Route path="/courses" component={Courses}/>
</Switch>

在Courses.js中，路线定义如下：

const Courses = () => (
  <Switch>
    <Route exact path="/courses" component={Course}/>
    <Route path="/courses/info" component={Info}/>
  </Switch>
)

当我使用url / courses / info刷新页面时，我看到字体文件未加载，因为url附加了以下课程：

http://localhost:8080/courses/js/fonts/Simple-Line-Icons.78f07e2c2a535c26ef21d95e41bd7175.woff

但它不应该有上述url中的课程。它应该是：

http://localhost:8080/js/fonts/Simple-Line-Icons.78f07e2c2a535c26ef21d95e41bd7175.woff

我不确定如何在网址中附加课程

我在webpack配置中使用以下内容：

{
   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader?name=/js/fonts/[name].[ext]',
    options: {
       name: './fonts/[name].[hash].[ext]'
   }
}

有人可以帮我解决这个问题。提前多多谢谢。

Answer 1

尝试

{
   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader',
    options: {
       name: '/fonts/[name].[hash].[ext]'
   }
}

您使用相对路径语法。它应该是绝对的。请让我知道它有帮助

Answer 2

我能够通过在webpack配置中添加以下内容来解决此问题：

{
 test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
 loader: 'url-loader?limit=100000'
}

在页面刷新时发出反应

2 个答案: