时间戳

首页 > 解决方案 > Element UI 默认主题在 NPM 上使用不正确的字体路径

laravel - Element UI 默认主题在 NPM 上使用不正确的字体路径

问题描述

使用 Laravel Mix，我无法让我的 Element UI 安装正确地找到字体路径。它返回字体路径的相对 URL，而不是从根开始。我正在使用 Element UI v2.9.1 和 Vue 2.6.10

我已经尝试在自定义 SASS 主题中自己设置字体路径并使用 Mix 复制字体目录

.js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')

这是在我的webpack.mix.js

import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale';
import lang from 'element-ui/lib/locale/lang/en';

window.Vue = Vue;
locale.use(lang);
Vue.use(ElementUI, { locale })

这就是我的 app.js 中的内容

无论我在我的网站上访问哪个页面，请求的 URL 都已经像

http://example.test/admin/my-uri/fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf?732389ded34cb9c52dd88271f1345af9

但是字体已正确部署到public/fonts/vendor/element-ui

标签： laravelvue.jslaravel-mixelement-ui

解决方案

跑...

npm i element-ui

在 /resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');
require('element-ui');

在 /resources/sass/app.scss

@import '~element-ui/lib/theme-chalk/index.css';

跑...

npm run prod

不要在 webpack.mix.js 中进行任何导入。

推荐阅读