Я недавно установил laravel v5.7 и vue 2. Затем я установил Элемент пользовательского интерфейса и iView UI Toolkit , все работает отлично, но все, что использует значки в любом компоненте пользовательского интерфейса iViewпоказывает квадратные блоки, но я хочу, чтобы результат выглядел как документация , где у предупреждения есть значок.Я искал и пробовал много решений, но ни одно из них не работало, например)
Что я сделал до сих пор
- Редактирование файла .htaccess в соответствии с этим article
- Установлено Laravel Cors
- Подтверждено, что шрифты существуют в "/ fonts / vendor / iview / dist / styles" после запуска npm run watch
- очистил мой кеш, историю, все.5) Проверено, что на файл CSS ссылаются правильно.6) Проверено, что css правильно ссылается на шрифты.Вот фрагмент файла css.
- Протестировано приложение на Chrome, Firefox и Opera, та же проблема
@font-face{font-family:Ionicons;src:url(/fonts/vendor/iview/dist/styles/ionicons.ttf?f3b7f5f07111637b7f12c1a4d499d056) format("truetype"),url(/fonts/vendor/iview/dist/styles/ionicons.woff?39f116d33948df9636a310075244b857) format("woff"),url(/fonts/vendor/iview/dist/styles/ionicons.svg?3f5fdc44d1e78a861fee03f2d8a59c60#Ionicons) format("svg");
Что у меня есть в app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the body of the page. From here, you may begin adding components to
* the application, or feel free to tweak this setup for your needs.
*/
import Vue from 'vue'
import App from './App.vue';
// Global event manager, to emit changes/updates
// such as when user has logged in e.g) auth.js
window.Event = new Vue;
// Import Element UI Kit
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });
// Import IView UI Kit
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
// Import Vue Router for custom routes and navigation
import VueRouter from 'vue-router';
import router from './routes.js';
Vue.use(VueRouter)
const app = new Vue({
el: '#app',
// Render the main app view
render: h => h(App),
// For our custom routes
router
});
Фрагмент того, что у меня есть в шаблоне vue
<template>
<el-row :gutter="20">
<Alert show-icon>An info prompt</Alert>
<Alert type="success" show-icon>A success prompt</Alert>
<Alert type="warning" show-icon>A warning prompt</Alert>
<Alert type="error" show-icon>An error prompt</Alert>
<Alert show-icon>
An info prompt
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
</Alert>
<Alert type="success" show-icon>
A success prompt
<span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
</Alert>
<Alert type="warning" show-icon>
A warning prompt
<template slot="desc">
Content of prompt. Content of prompt. Content of prompt.
</template>
</Alert>
<Alert type="error" show-icon>
An error prompt
<span slot="desc">
Custom error description copywriting.
</span>
</Alert>
<Alert show-icon>
Custom icon
<Icon type="ios-bulb-outline" slot="icon"></Icon>
<template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
</Alert>
</el-row>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
Страница после обновления - вкладка "Сеть"
Страница после обновления - вкладка «Журнал консоли»
Страница после обновления - вкладка Elements, css, которая вытягивает шрифты
Папка шрифтов
Что я заметил.
Самое смешное, что кажется, что работают только шрифты Element UI.Я также попытался установить шрифт-удивительные шрифты, но безуспешно.
ДРУГИЕ ВАЖНЫЕ ЗАМЕЧАНИЯ
- Я работаю на виртуальном хосте
- Я работаю в автономном режиме, используя xammp