Vue 打包后bootstrap icon 图标不显示了

简介: 在Vue脚手架项目中使用bootstrap icon图标,dev模式正常,打包后图标不显示了

问题描述:在Vue脚手架项目中使用bootstrap icon图标,dev模式正常,打包后图标不显示了

如图
停止1.png

开始1.png

处理方法:

build/webpack.prod.conf.js中把 extract:true 改为 false

module: {
        rules: utils.styleLoaders({
            sourceMap: config.build.productionSourceMap,
            extract: false, // 原为 true
            usePostCSS: true
        })
    },

修改后重新打包,然后图标正常显示了。

停止2.png

开始2.png

结束。

相关文章
|
3月前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
248 59
|
3月前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
144 57
|
5月前
|
缓存 编解码 JavaScript
理解打包好的vue项目结构dist包
理解打包好的vue项目结构dist包
121 3
|
2月前
|
JavaScript 前端开发
|
3月前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
3月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
121 6
|
4月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
383 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
4月前
|
JavaScript
VUE——自动打包并生成dist.zip压缩包
VUE——自动打包并生成dist.zip压缩包
92 0
VUE——自动打包并生成dist.zip压缩包
|
4月前
|
JavaScript 算法 数据安全/隐私保护
Vue 打包 Error: error:0308010C:digital envelope routines::unsupported
Vue 打包 Error: error:0308010C:digital envelope routines::unsupported
63 0
|
4月前
|
JavaScript 测试技术
VUE——打包时如何指定环境
VUE——打包时如何指定环境
38 0