link2055 link2056 link2057 link2058 link2059 link2060 link2061 link2062 link2063 link2064 link2065 link2066 link2067 link2068 link2069 link2070 link2071 link2072 link2073 link2074 link2075 link2076 link2077 link2078 link2079 link2080 link2081 link2082 link2083 link2084 link2085 link2086 link2087 link2088 link2089 link2090 link2091 link2092 link2093 link2094 link2095 link2096 link2097 link2098 link2099 link2100 link2101 link2102 link2103 link2104 link2105 link2106 link2107 link2108 link2109 link2110 link2111 link2112 link2113 link2114 link2115 link2116 link2117 link2118 link2119 link2120 link2121 link2122 link2123 link2124 link2125 link2126 link2127 link2128 link2129 link2130 link2131 link2132 link2133 link2134 link2135 link2136 link2137 link2138 link2139 link2140 link2141 link2142 link2143 link2144 link2145 link2146 link2147 link2148 link2149 link2150 link2151 link2152 link2153 link2154 link2155 link2156 link2157 link2158 link2159 link2160 link2161 link2162 link2163 link2164 link2165 link2166 link2167 link2168 link2169 link2170 link2171 link2172 link2173 link2174 link2175 link2176 link2177 link2178 link2179 link2180 link2181 link2182 link2183 link2184 link2185 link2186 link2187 link2188 link2189 link2190 link2191

[Vue.js] Build prod dont display font - basic webpack init

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 !