Vue Cli 3本地字体未加载
Posted
技术标签:
【中文标题】Vue Cli 3本地字体未加载【英文标题】：Vue Cli 3 Local fonts not loading 【发布时间】：2019-08-20 16:22:38 【问题描述】：尝试在 Vue CLI 3 中加载自定义本地字体时，字体仍然不会出现。我没有收到任何错误消息。检查器显示正在加载的正确规则，但字体在#app 上回退到serif。字体没有出现在我的 dist 文件夹中。
我尝试在 vue.config.js 中添加加载器，更改 url 路径，并将@font-face 规则移动到不同的位置，将公共路径更改为“”和“/”，将 scss 导入 main.js .
字体加载：
@font-face
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot');
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
并在 App.vue 中使用：
<style lang="scss">
#app
font-family: 'OpenSans-Regular', serif;
</style>
该样式位于我的main.scss 文件中。文件结构如下：
src
assets
fonts
OpenSans-Regular.eot
OpenSans-Regular.woff
etc
styles
main.scss
App.vue
vue.config.js
vue.config.js文件如下：
module.exports =
publicPath: '/',
css:
sourceMap: true,
loaderOptions:
sass:
data: `@import "@/styles/main.scss";`
,
configureWebpack:
module:
rules: [
test: /\.(ttf|otf|eot|woff|woff2)$/,
use:
loader: "file-loader",
options:
name: "fonts/[name].[ext]",
,
,
]
我也试过vue.config.js中的chainWebpack，但无济于事：
chainWebpack: config =>
config
.module
.rule("file")
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
.use("url-loader")
.loader("url-loader")
.options(
limit: 10000,
name: 'assets/fonts/[name].[ext]'
)
.end();
【问题讨论】：
【参考方案1】：你试过了吗
@font-face
font-family: 'OpenSans-Regular';
src: url('~@/assets/fonts/OpenSans-Regular.eot');
src: url('~@/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('~@/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('~@/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('~@/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('~@/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
适用于我 Vue CLI 3，没有 vue.config.js 设置。
我正在像这样加载我的样式：
import Vue from 'vue';
import router from './router';
import store from './store';
// eslint-disable-next-line
import styles from './scss/app.scss';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue(
router,
store,
render: h => h(App)
).$mount('#app');
不确定这是否是好的做法。
【讨论】：
哇，使用 chainWebpack 方法尝试了 2 个小时，但什么不行，这行得通，完全不知道为什么...... 为我工作，拯救我的生命 @Joeri 你说这个“// eslint-disable-next-line”是什么意思，我做不到，我得到一个错误“找不到模块..” @TarasKryvko 如果您不使用 Lint，请删除该行。我的 linter（语法检查器）不喜欢我将 lib 导入到我在代码中不使用的 var 中。 如果你有 lint，你可以只导入 "./scss/app.scss";【参考方案2】：我将自定义 icon-font 粘贴在我的初始 index.html 页面的 head 标记中，该页面还具有自定义字体导入。您将粘贴 <div id="vue-app"></div> 的同一页面。所有其他页面/组件都可以为我使用字体系列。
<head>
...
<link rel="stylesheet" href="icon-font/styles.css" />
</head>
但如果我尝试项目中的任何其他位置，它就会失败。并且 Scss 甚至无法编译。
【讨论】：
【参考方案3】：我最终做的是转移到文件加载器方法来获取要打包的字体并设置公共路径。
vue.config.js
module.exports =
assetsDir: 'assets/',
publicPath: '/', // Base directory for dev
css:
sourceMap: true,
loaderOptions:
sass:
data: `@import "@/styles/main.scss";`
,
chainWebpack: config =>
config.module
.rule("fonts")
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use("file-loader")
.loader("file-loader")
.tap(options =>
options =
// limit: 10000,
name: '/assets/fonts/[name].[ext]',
return options
)
.end()
;
除非在 js 中调用，否则文件加载器看不到文件，因此我将它们导入 main.js 控制台日志用于导航 linter 标记未使用的导入
// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';
console.log(OpenSansReg, OpenSansBold, OpenSansLight);
然后在我的一个 scss 文件中
@font-face
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
【讨论】：
【参考方案4】：对我来说，我只是取出了那个 'format()' 的东西并且可以工作......最后......
【讨论】：
【参考方案5】：这对我有帮助 在 src 文件夹中 main.js 刚刚添加：
import '../src/fonts/fonts.css'
字体中的代码如下：
@font-face
font-family: 'Conv4240';
src: url('~@/fonts/Conv4240/4240.eot');
src: local('☺'),
url('~@/fonts/Conv4240/4240.woff') format('woff'),
url('~@/fonts/Conv4240/4240.ttf') format('truetype'),
url('~@/fonts/Conv4240/4240.otf') format('opentype'),
url('~@/fonts/Conv4240/4240.svg') format('svg');
font-weight: normal;
font-style: normal;
一切都开始工作了
【讨论】：
以上是关于Vue Cli 3本地字体未加载的主要内容，如果未能解决你的问题，请参考以下文章
TailwindCss：本地字体未显示（在 Vue 3 中）
在 vuetify 中更改默认字体不起作用（vue-cli 3）[Vuetify 1.X]