Vue Cli 3 Локальные шрифты не загружаются - PullRequest
Новая
       63

Vue Cli 3 Локальные шрифты не загружаются

3 голосов
/ 29 марта 2019

При попытке загрузить пользовательские локальные шрифты в Vue CLI 3 шрифты по-прежнему не отображаются. Я не получаю никаких сообщений об ошибках. Инспектор показывает правильное загружаемое правило, но шрифты возвращаются к serif в #app. Шрифты нигде не отображаются в моей папке 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: 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();
  }

Ответы [ 3 ]

1 голос
/ 23 апреля 2019

Вы пробовали 

@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');

Не уверен, что это хорошая практика.

0 голосов
/ 06 июня 2019

В итоге я перешел к методу загрузчика файлов, чтобы заставить шрифты упаковывать и установить публичный путь.

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()
  }
};

Файл-loader не видит файлы, если они не вызваны в js, поэтому я импортировал их в main.js Журнал консоли должен перемещаться по линтеру, отмечая неиспользуемый импорт 

// 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;
}
0 голосов
/ 03 июня 2019

Я вставил свой собственный значок-шрифт в теги заголовка моей начальной страницы index.html, которая также имеет собственный импорт шрифтов. Та же страница, на которую вы бы прикрепили свой <div id="vue-app"></div>. Все остальные страницы / компоненты могут использовать семейство шрифтов для меня.

<head> ... <link rel="stylesheet" href="icon-font/styles.css" /> </head>

Но если я попробую какое-либо другое место в проекте, это не удастся. и Scss даже не компилируется.

...