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:’…/…/’
但是就是不知道放在什么地方。。。。。。。。。。。。。。。。

思考：

查看最原始的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问题解决，不知道还有没有其他问题

vue-elementui-admin项目 woff，tff字体 404处理相关推荐

上传服务器后字体文件丢失,详解Vue+elementUI build打包部署后字体图标丢失问题...
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
基于vue+elementui+admin的axios封装
文章目录系列文章目录前言一.基于vue+elementui+admin对axios进行封装? 二.使用步骤 1.若项目需要进行字符防串改处理(项目需要而定) 2.创建crypto.js和encr ...
部署vue element-ui admin报错(vue2)
部署vue element-ui admin报错(vue2) 目录部署vue element-ui admin报错(vue2) 一.官方安装说明二.部署报错的关键影响因素 2.1."开发 ...
解决Web部署 svg/woff/woff2字体 404错误
问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff.woff2字体的错误.导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间. 原因:因为服务器IIS不认SV ...
Idea搭建VUE+elementUi前端项目
1.首先打开idea选择 javascript 2.项目web项目搭建成功 3.先输入vue in it webpack,路由之前全部回车,包括路由!路由之后全部选n回车!最后一个选npm就行了,就让 ...
毕设项目——智慧小区系统（Java Spring Boot+Vue ElementUI）
毕设项目--智慧小区系统(Java Spring Boot+Vue ElementUI) 项目初衷(最真实版) 系统技术分析前端界面后端及数据库系统功能介绍小区业主端物业人员端系统界面展示 ...
从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
nodejs+vue+elementui停车场车位管理系统python-java-php333
管理员功能模块管理员登录,管理员通过输入用户.密码.角色等信息进行系统登录, 管理员对个人中心进行操作填写原密码.新密码.确认密码并进行添加.删除.修改以及查看, 用户管理,用户管理页面可以填写 ...
asp.net mvc 引入vue+ElementUi
asp.net mvc 引入vue+ElementUi 右键项目名--管理NuGet程序包在浏览里搜素 vue element 分别安装会发现在Content文件夹 script文件夹下会有相关的 ...

vue-elementui-admin项目 woff，tff字体 404处理

思考：

查看最原始的elementui 使用的是 ExtractTextPlugin webpack是3.10.0的

publicPath:’…/…/'就可以解决404问题了

vue-elementui-admin项目 woff，tff字体 404处理相关推荐

最新文章

热门文章