Vue-cli Webpack 模板无法正确提供静态字体

Question

在我的 config/index.js 中，在构建部分，我有

assetsSubDirectory: 'static',
assetsPublicPath: '/path/to/subdirectory/',

我的静态字体来自 node_modules 中导入的主题模板，然后应该查找 root/path/to/subdirectory/static/fonts/some-fonts.woff。这是正确的吗？

但是，在我的生产版本中，该版本正在寻找这些文件：

root/static/fonts/some-fonts.wff

我的 Less 文件示例：

    @font-face {
        font-family: 'Source Sans Pro';
        font-style: normal;
        font-weight: 300;
        src: local('Source Sans Pro'),
        url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.eot) format('embedded-opentype'),
        url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.ttf) format('truetype'),
        url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.woff) format('woff'),
        url(/static/fonts/source-sans-pro/source-sans-pro-v9-vietnamese_latin-ext_latin-300.woff2) format('woff2');
    }

我该如何解决这个问题？

Answer 1

字体位置不是问题；如果它在您的开发环境中工作，那么字体文件将从 node_modules 加载，就像您躲避的那样。

问题出在css-loader； read their docs here。 public 路径只能是“/”，然后 'static' 将包含 'fonts' 作为构建中的子目录。我有一个类似的问题，这解决了它。如果您尝试对 public 路径执行“/”以外的操作（例如，空字符串），那么您将破坏 vue-cli 模板的处理方式。

这就是不同之处 — 您不是在 "webpack" 可以自由支配以设置任何您想要的东西。使用 vue-cli，你接受 "their way" 配置东西（我没有敲门）。如果你需要更多的自由来进行自定义配置，如上所示，请考虑不使用 vue-cli 的 webpack。

无论如何，请确保您在 index.js 内接触开发和构建属性地图；这些 PATH 变量针对每个环境重复，有时编码人员不记得向下滚动到 'build' 属性并更改这些 PATH 值。

Vue-cli Webpack 模板无法正确提供静态字体

Vue-cli Webpack template not properly serving static fonts

webpack

vue.js

vuejs2

vue-cli