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下再去尋找次。