vue打包后elmentUI element-icons.woff 和 element-icons.ttf路径错误

文章讲述了在Vue项目中,部署后Element UI的element-icons文件路径错误的解决方案,关键在于调整vue.config.js中的assetsPublicPath配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue打包后elmentUI element-icons.woff 和 element-icons.ttf路径错误

在开发中遇到一个头痛的问题,就是打包部署后element-icons文件路径读取错误。正常打包后,elmentUI element-icons.woff 和 element-icons.ttf是会出现在fonts文件夹

在这里插入图片描述
部署上去获取的路径是如下图。
在这里插入图片描述
错误的原因是css下面是没有这个文件的,这个文件是在fonts文件夹里面,css跟fonts是同级的。

错误的原因是在vue.config.js配置assetsPublicPath问题
// 把是生产环境的路径变成''就可以解决这个问题了
const assetsPublicPath = process.env.NODE_ENV === 'production' ? '' : '/'

这就是我在遇到这个问题的解决方案。

### 问题分析 在 Vue 项目中,当使用 `element-ui` 组件库时,可能会遇到 Webpack 打包过程中无法解析 `element-icons.ttf` 文件的情况。这种错误通常由以下几个原因引起: 1. **Webpack 配置未正确处理字体文件**:如果 Webpack 的配置缺少对 `.ttf`, `.woff`, 或其他字体格式的支持,则可能导致这些资源无法被正确打包[^2]。 2. **路径问题**:某些情况下,`element-ui` 图标的实际请求路径可能与预期不符,从而导致图标无法正常显示[^3]。 3. **版本冲突**:如果项目的依赖管理工具(如 npm 或 yarn)安装的实际 `element-ui` 版本与其声明的版本不一致,也可能引发类似的错误[^4]。 --- ### 解决方案 #### 方法一:调整 Webpack 配置 确保 Webpack 能够正确识别并处理字体文件。可以在 `webpack.config.js` 中添加如下规则: ```javascript module.exports = { module: { rules: [ { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader', options: { name: '[name].[hash:8].[ext]', outputPath: 'fonts/', publicPath: '../fonts/' } } ] } }; ``` 上述代码通过 `file-loader` 处理字体文件,并将其输出到指定目录下。 --- #### 方法二:修复路径问题 检查 `element-ui` 图标的真实加载路径是否存在问题。可以通过修改 `vue.config.js` 来覆盖默认的静态资源配置: ```javascript const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: config => { config.module .rule('fonts') .use('url-loader') .loader('url-loader') .tap(options => Object.assign({}, options, { limit: 10000 })); config.resolve.alias.set('@', resolve('src')); }, css: { loaderOptions: { less: { javascriptEnabled: true, }, }, }, configureWebpack: { externals: { vue: 'Vue' } } }; ``` 此方法可以有效修正因路径设置不当而导致的图标加载失败问题。 --- #### 方法三:锁定依赖版本 为了避免由于版本差异引起的兼容性问题,建议显式固定 `element-ui` 的版本号。编辑 `package.json` 并移除版本前缀符号 (`^`): ```json { "dependencies": { "element-ui": "2.4.9" } } ``` 执行以下命令重新安装依赖项以确保一致性: ```bash rm -rf node_modules package-lock.json && npm install ``` 这样能够防止意外更新至更高版本,进而规避潜在的风险。 --- ### 总结 以上三种方式分别针对不同的成因提供了针对性解决方案。具体实施时可根据实际情况选择合适的方法或者组合多种手段共同作用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值