vue-elementui-admin项目 woff,tff字体 404处理
1、出现原因elementui 的css woff tff 的路径然后打包的文件路径为dist这就直接造成了最后的访问路劲为http://127.0.0.1/dist/static/css/static/font.element-iconsXXX.woff这样导致直接就多了static/css两层路径最后导致404在网上看了好多资料是说加个publicPath:’…/…/’但...
·
1、出现原因
elementui 的css woff tff 的路径
然后打包的文件路径为 dist
这就直接造成了最后的访问路劲为
http://127.0.0.1/dist/static/css/static/font.element-iconsXXX.woff
这样导致直接就多了static/css两层路径最后导致404
在网上看了好多资料是说加个
publicPath:’…/…/’
但是就是不知道放在什么地方。。。。。。。。。。。。。。。。
思考:
查看最原始的elementui 使用的是 ExtractTextPlugin webpack是3.10.0的
在下面的代码中添加
publicPath:’…/…/'就可以解决404问题了
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
publicPath:’…/…/’
})
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// 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)
}
}
在看本地是用的webpack 4.16.0 使用的是MiniCssExtractPlugin
function generateLoaders(loader, loaderOptions) {
const loaders = []
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
} else {
loaders.push('vue-style-loader')
}
loaders.push(cssLoader)
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
return loaders
}
最后只能仿照上面的模式写一个了
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap,
}),
})
}
// if (options.extract) {
return [
options.extract ? {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../../'
}
} : 'vue-style-loader',
].concat(loaders)
// }
}
最后测试404问题解决,不知道还有没有其他问题
更多推荐
已为社区贡献7条内容
所有评论(0)