vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后，icon全部丢失

8月前作者：codeRainbow 分类：Toy博客阅读(54) 违法举报

这篇具有很好参考价值的文章主要介绍了vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后，icon全部丢失。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后，icon全部丢失
解决办法及原因：
elementui在2.12版本中icon数量较之2.4.9版本的扩展2倍不止。原来webpack中对于字体loader的限制是limit<10000，就会将字体转换为base64，2.12版本中字节已经超过10000，所以没有被打包，进而直接请求改字体。解决办法是，去除limit限制，强制对所有的字体文件，进行base64转换文章来源地址https://www.toymoban.com/news/detail-596699.html

{
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    // limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }

到了这里，关于vue+elementui项目打包后部署到测试环境icon全部丢失【element-ui】大版本升级element-ui后，icon全部丢失的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

VUE build:gulp打包：测试、正式环境

目录项目结构 Gulp VUE使用Gulp Vue安装Gulp Vue定义Gulp.js package.json build文件夹 config文件夹 static-config文件夹 Gulp是一个自动化构建工具，可以帮助前端开发者通过自动化任务来管理工作流程。Gulp使用Node.js的代码编写，可以更加灵活地管理代码以及任务流程. 对于Vue.js前端

2024年02月07日
浏览(35)
项目打包并部署到Docker环境的完整流程

使用前端构建工具（例如Webpack、Vue CLI、Create React App）将前端项目打包成静态文件。创建一个名为 Dockerfile 的文件，内容如下： 3.使用以下命令构建Docker镜像： 4.运行以下命令启动前端容器： 5.现在可以通过浏览器访问 http://localhost 来查看部署的前端应用。 1.确保你的后端

2024年02月14日
浏览(47)
[Android]修改应用包名、名称、版本号、Icon以及环境判断和打包

在Android Studio中更改项目的包名涉及几个步骤：打开项目结构: 在Android Studio中，确保您处于Android视图模式（在左侧面板顶部有一个下拉菜单可以选择）。重命名包名: 在项目视图中，找到您的包名（例如com.gamin.learndemo），右键点击它。选择Refactor Rename。在弹出的对话框

2024年02月05日
浏览(47)
Vue项目打包问题（生产环境样式失效）

在公司项目发布上线后，出现了部分样式失效的问题。我们引用的是vuetify第三方库，经过检查，发现是部分样式被vuetify自带的css样式给覆盖，原因是生成环境的打包模式与开发环境不同。生产模式（env.prod）在生产模式下打包，项目会被最小化，所有的css代码会被提取出

2024年02月11日
浏览(86)
Vue项目打包成docker镜像部署

一、介绍我们部署Vue项目，可以build之后，直接放到nginx下面即可，今天给大家介绍创建docker镜像，使用docker镜像启动容器运行部署Vue项目的方式，可以尝试尝试，原理和使用nginx部署一样，不过是使用的docker容器而已，内部还是使用的是nginx作为基础镜像。二、docker安装 d

2023年04月08日
浏览(39)
vue项目打包部署到服务器

目录一、打包项目二、修改Nginx的配置三、部署四、开放端口号 1. 在 vue.config.js 文件中找到并修改，主要是publicPath 与outputDir 两项配置，若项目中有baseUrl,替换为publicPath （baseUrl, vue cli 3.3 已弃用） 2. 修改完成之后就可以进行打包了，在package.json文件找到下图中的打包命

2024年02月05日
浏览(56)
vue项目打包部署-手把手教程

1.购买服务器可选阿里云/腾讯云/华为云等等… 购买时选择镜像,我们这里以CentOS为例 2.配置服务器 2.1 安装FinalShell 需要本地使用一些软件来操作服务器,例如:FinalShell / Xshell … 我这里使用的是FinalShell,安装好以后,打开软件与建立链接,就可以用命令行来操作服务器了最

2024年02月22日
浏览(50)
Vue项目如何打包并部署(nginx)

使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署。一.打包 vue项目其实可以直接通过一下语句进行打包：默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件配置内容

2023年04月26日
浏览(35)
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）

目录第一章前言第二章准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

2024年02月04日
浏览(54)
【前端部署】vue项目打包并部署到Linux服务器

在vs code中打开vue前端项目文件夹，在终端中输入 npm run build ，打包完成后，在前端项目文件夹中会生成一个名为 dist 的文件夹，如下图所示： dist文件夹打开如下所示：打开服务器终端，在终端中输入以下命令，下载nginx安装包。其中nginx版本可以自己选择，具体版本可查看

2024年02月06日
浏览(54)