Build Prod не отображать шрифт - базовая инициализация веб-пакета - PullRequest
Новая
       16

Build Prod не отображать шрифт - базовая инициализация веб-пакета

1 голос
/ 07 мая 2019

Мне нужно использовать шрифт с именем «myFontName» из файла ttf в производственной среде после запуска этой команды: 

npm run build

Для этого теста я только инициализирую проект с этой командой: 

vue init webpack myProjectName

В среде разработчиков (npm run dev) я могу отображать и использовать свой шрифт. Но я не могу увидеть тот же шрифт после сборки. Однако в производственной среде я вижу свой шрифт в правилах CSS (консоль браузера).

Итак, кажется, что шрифт отображается в dev, а не в производстве.

Это мой древовидный проект: 

src
|_assets
|_components
   |componentfile.vue
   |_fonts
      |_myFontFile.ttf

Это мое дерево папок dist: 

dist
|_js
|_static
   |_fonts
      |_myFontFile.ttf

Я вызываю свой шрифт прямо в файле component.vue: 

<script scoped>
@font-face{
font-family:"myFontName";
src: url("./fonts/myFontFile.ttf") format("truetype");
}
<script>

Webpack натив от init. У меня есть этот загрузчик в моем webpack.base.conf.js: 

{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
}

Для конфигурации сборки: 

build{
  build.assetsPublicPath: ‘/’
}

Итак, что не так? Почему prod env неправильно отображает мой шрифт? Спасибо, чтобы помочь мне решить эту проблему шрифта.

1 Ответ

1 голос
/ 08 мая 2019

Хорошо, нет ответа?Никто ...

Наконец, вот мое решение.

В файле util.js вставьте: 

publicPath: '../../'

В эту часть кода 

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

Но почему?

Проверьте эти два похожих вопроса ..

Подобный вопрос на форуме Vuejs
Аналогичный вопрос на Github

После сборки я могу проверить CSS-файлы стилей в 

/dist/src/static/css/

... и отметил, что мой источник @ font-face имеет неверный путь после сборки в соответствии с мапапка dist tree: 

@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format("truetype")}

вместо url (статический / fonts / myFontFileBis.ttf) , мне нужно получить url (../../ static / fonts)/myFontFileBis.ttf).

Итак, мне нужно установить publicPath в util.js.

это работает сейчас!

...