Question

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

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

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

但是，在我的生成版本中，构建正在以下位置查找这些文件：

根/静态/字体/一些-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。公开路径必须是＆＃39; /＆＃39;只有，而且＆＃39;静态＆＃39;然后将包含＆＃39;字体＆＃39;作为构建中的子目录。我有一个类似的问题，这解决了它。如果您尝试执行除＆＃39; /＆＃39;以外的其他操作对于公共路径（例如，空字符串），那么您将打破vue-cli模板的处理方式。

这就是区别 - 你没有做过＆＃34; webpack＆＃34;在哪里你有自由的统治设置你想要的任何东西。使用vue-cli，您正在接受＆＃34;他们的方式＆＃34;配置的东西（我没有敲门）。如果您需要更多自由来进行上面显示的自定义配置，请考虑不带vue-cli的webpack。

无论如何，请确保您正在触摸dev并在index.js中构建属性映射;对于每个环境都会重复这些PATH变量，有时编码员不记得向下滚动到“构建”。属性并改变那些PATH值。

Vue-cli Webpack模板没有正确提供静态字体

1 个答案: