更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置這一部分，根據目錄結構自由調整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
補充知識：webpack打包運行vue項目后找不到.ttf及.woff文件，或者路徑報錯
webpack.base.config 文件中 ,有的人可能在utils.js中
修改前：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘],
fallback: ‘style-loader‘
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘],
fallback: ‘style-loader‘
}),
},
修改后：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘],
publicPath:‘../../‘,
fallback: ‘style-loader‘
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘],
publicPath:‘../../‘,
fallback: ‘style-loader‘
}),
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
針對ttf/woff結尾的文件使用url-loader加載的，要尋找到加載樣式的loader改變打包路徑。
就是再加載css的時候，將publicPath路徑更改為“../../”,也根據自己的目錄結構自定義。這樣打包后的項目才能找到相對應的應用路徑,為什么要這樣改呢，是因為我們的路徑要按照打包后的層級結構去找，不是按原本項目本身，還有一點相對路徑有時候找不到，所以才要改成這種絕對路徑，在static下再去尋找次。
以上這篇vue-cli+webpack項目打包到服務器后,ttf字體找不到的解決操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
