Vuetify使用material design icons本地图标资源

@vue/cli 4.2.3脚手架创建的Vuetify项目默认使用的是国外CDN上的Roboto和Material Design Icons资源,速度很慢甚至会加载失败,下面记录一下如何把这两个用本地资源代替

修改/public/index.html
删除下面两行引用

<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900″>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css”>

安装相应包
npm install @mdi/font -D

修改plugins/vuetify.js

import Vue from ‘vue’;
import Vuetify from ‘vuetify/lib’;
import zhHans from ‘vuetify/es5/locale/zh-Hans’ // 引入中文语言包
import ‘typeface-roboto/index.css’ // 引入本地的Roboto字体资源
import ‘@mdi/font/css/materialdesignicons.css’ // 引入本地的Material Design Icons资源

Vue.use(Vuetify);

export default new Vuetify({
lang:{
locales: {zhHans},
current: ‘zhHans’
},
icons:{
iconfont: ‘mdi’, // 设置使用本地的icon资源
}
});

错误来源:TypeError: Cannot read properties of undefined (reading ‘show_ui’) | WordPress.org

上一篇
下一篇