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