javascript - 找不到字体,vuejs构建

标签 javascript webpack vue.js build core-ui

我的 config/index.js 中有:

...
build: {
    index: path.resolve(__dirname, 'dist/client.html'),
    assetsRoot: path.resolve(__dirname, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
...

我的App.vue:

<style lang="scss">
  /* Import Font Awesome Icons Set */
  $fa-font-path: '~font-awesome/fonts/';
  @import '~font-awesome/scss/font-awesome.scss';
  ...
</style>

在开发模式下一切正常,没有丢失 Assets 等...,一切都很好。

但是当我构建项目时,字体路径变成:

dist/static/css/static/fonts/font

这会导致给定资源出现 404 错误,因为我在 css 内没有文件夹,而且我不知道为什么要这样做。

请注意,我不希望它位于根目录中,例如:

assetsPublicPath: '/', // <-- don't want this since the project it's going to be in a subfolder

如果你们认为为了更好/更少而缺少一些脚本 模棱两可的答案请告诉我,我会编辑它以包含它们。

最佳答案

删除您在 App.vue 中发布的与 Font Awesome 相关的所有内容。

main.jsapp.js 内,执行以下操作。它应该开始构建得很好。

main.js/app.js

require('font-awesome/scss/font-awesome.scss')

关于javascript - 找不到字体,vuejs构建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49957104/

相关文章:

javascript - Vue/Vuex 在创建的钩子(Hook)中等待异步调度

javascript - Prefer destructuring es-lint错误

javascript - JQuery 延迟加载。如何确保 jQuery 已加载?

javascript - 拖放时虚线边框

javascript - 如何选择 node_modules dist flavor 与 webpack 捆绑在一起

vue.js - 使用 jest 和 vue-test-utils 进行 Vue 测试无法解析通过 app.component() 引入的组件

javascript - 在聊天 Discord.js 中发送消息 dm

node.js - 将 Benchmarkjs 与 Webpack 和 Babel 结合使用

webpack - 有没有办法在 webpack 2 中禁用 tree-shaking?

javascript - 以编程方式添加的引用未应用