更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
|
1
2
3
4
5
6
7
8
9
|
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中
修改前：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{ 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‘ }),}, |
修改后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
{ 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字體找不到的解決操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/cifangling/article/details/81866548
