I need to use font named myFontName from ttf file in production environment after launch this command :
npm run build
For this test, there is only initialize project with this command :
vue.js init webpack myProjectName
In dev environment (npm run dev) i can display and use my font. But i cant see the same font after build. However, in the production environment i can see my font in css rules (browser console).
So, font seems to be display in dev and not in production.
This is my tree project:
src
|_assets
|_components
|componentfile.vue
|_fonts
|_myFontFile.ttf
This is my dist folder tree :
dist
|_js
|_static
|_fonts
|_myFontFile.ttf
I call my font directly in my component.vue.js file :
<script scoped>
@font-face{
font-family:”myFontName”;
src: url(“./fonts/myFontFile.ttf”) format(“truetype”);
}
<script>
Webpack is nativ from init. there is this loader in my webpack.base.conf.js :
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
}
}
For build config :
build{
build.assetsPublicPath: /
}
So, what’s wrong ? Why prod env don’t display my font correctly ?
Thanks to help me to resolve this font problem.
Solution :
Okay no response ? Nobody…
Finally, here is my solution.
In util.js file, insert :
publicPath: ‘../../‘
In this part of code
// 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)
}
But why ?
Check this two similar issues..
Vuejs forum similar issue
Github similar issue
After build, i can inspect style CSS files in
/dist/src/static/css/
… and noted that my @font-face source have the wrong path after build according to ma dist tree folder :
@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format(“truetype”)}
Instead of url(static/fonts/myFontFileBis.ttf), i need to get url(../../static/fonts/myFontFileBis.ttf).
So, i need to set publicPath in util.js.
it work now !