使用Webpack打包vue-cli的项目后,字体图标等失效的解决办法

最新推荐文章于 2023-07-26 12:01:22 发布

向前看傻帽儿

最新推荐文章于 2023-07-26 12:01:22 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Web前端

本文链接：https://blog.youkuaiyun.com/qq_41557320/article/details/88899079

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Webpack配置文件中调整extract属性来控制样式资源的提取方式。通过将该属性从true改为false，可以改变构建过程中CSS文件的处理流程。

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

找到build文件夹中的这个文件：build/webpack.prod.conf.js

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

将extract这个属性改为false，原始为true，然后重新打包一下即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

向前看傻帽儿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在vue项目中webpack打包后字体不生效

若晨工作室

09-20

8016

最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。解决方法：尝试了一下去掉双引号，也就是font-family:微软雅黑，这

vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）

happy81997的博客

11-15

2139

Element-UI在vue项目中，打包build后字体、图标丢失应用场景： F12报错提示：问题原因：（1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。（2）也就是说实际应该通过/static/fonts/**...

参与评论您还未登录，请先登录后发表或查看评论

解决在vue项目中webpack打包后字体不生效的问题

10-18

今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题

weixin_29288313的博客

01-13

1282

vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

10-14

主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue-cli设置css不生效的解决方法

01-19

我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。在这种项目的webpack.base.config.js一般设置loader的 rules: ...

vue项目webpack打包后字体失效

Borage21的博客

05-14

1036

打包之后的：font-family:\5FAE\8F6F… 多了一个反斜杠定位是写字体的时用汉字的原因，汉字打包成会被译成编码替换成对应的英文就可以了

vue全局字体不生效的问题

浮游的博客

07-26

1704

今天接手了一个新项目，在熟悉项目的时候，意外发现，网站的字体和设计稿上的字体不一样。虽然只是一个小问题，但这种问题其实很常见，记录下来，以后翻看~于是查看一番之后，发现引入字体的方式错了。问题出在，没有引入字体。

解决Vue打包上线之后部分CSS不生效的问题

12-13

首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加， minimize:true const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, mini

关于引入外部字体文件，线下环境可以，线上打包环境失效的问题

qq_39822531的博客

06-12

266

引入外部字体文件，打包环境下失效的问题

vue 不生效打包样式_Vue-webpack打包上线后css样式不生效的问题解决

weixin_33656931的博客

01-13

3267

在vue项目中，开发环境的样式没问题。但是webpack打包上线后，样式不生效，本文将讲述如何解决这个问题。样式穿透vue项目中style标签有个scoped属性，当有这个属性时，css样式只会作用于当前组件，对其它组件和子组件不会生效。这个属性为了解决样式污染的问题。但是我们需要父组件的样式也能对子组件生效，怎么办，比如父组件有个class为a,子组件也有a,如果想要只在父组件写一次，我们就可以...

【前端技术】Vue在打包之后出现Css样式冲突，解决方法。

weixin_41711265的博客

11-03

5976

先说问题 1：在做vue项目打包时出现Css样式冲突的问题。在本地运行项目时样式都是正常，但在服务器进行打包之后项目的整体样式就有问题了。举例说明： 1.图片大小发生变化，怎么改也改不好。 2.在查看F12中会多出当前页面没有设置过的Css样式。 3.或者是设置过的样式，在F12中显示带“黑线”的也就是被注释的。 4.页面样式跑偏等等。都有可能是Css样式冲突造成的,不清楚大家是不是这样的,反正我是这样的。经过这次的问题,把我遇到的解决办法记录一下, 遇到的解决方案 1.第一种方法可以选择在

vue 项目在 build 后 dist 文件下的 fonts 字体路径不对

weixin_43844392的博客

04-23

1557

今天在build 完一个项目生成apk 以后发现引入的fonts 全部都失效了，但是把生成的 build 文件放在生成的 css 文件夹下的话，又好了，很明显是路径的问题。在这涉及到 build 公共文件的路径的问题首先我们先看一下 build 完以后的 dist 文件的目录结构可以看出 fonts 和 css 文件在同一目录下：我们在 build 文件夹下面找到 ...

Vue用webpack打包CSS样式-webkit-box-orient: vertical丢失问题

weixin_34247032的博客

07-27

176

2019独角兽企业重金招聘Python工程师标准>>> ...

vue项目css样式冲突,Vue 项目部署出现css样式失效的解决方案

weixin_39633437的博客

08-03

957

在测试框架中使用Log4J 2之前的测试框架:http://www.cnblogs.com/tobecrazy/p/4553444.html 配合Jenkins可持续集成:http://www.cnblogs.com/tobecr ...mysql 查看数据库、表的基本命令1:show databases; 查看所有的数据库,等同于select schema_name from informati...

webpack打包css前缀自动取消，以及样式冲突问题

weixin_33841503的博客

04-24

558

new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), // Setting the following option to `false` will not extract CSS from codesplit chunks. // ...

vue使用webpack打包生产时出现的错误和解决方法

u012967454的博客

01-31

1695

1.Failed to load resource: net::ERR_FILE_NOT_FOUND或者vue dist文件下的index.html没显示（解决：考虑路径问题，在配置webpack ，output属性时设置所有路径添加./（publicPath:’./’）使得项目能进入到其所在的相对路径上 ./表示当前路劲下从而通过这种形式修改添加publicPath解决vue项目生成文件时...

D:\迅雷云盘2\shangyiton\vue-cli\demo>pnpm run Commands available via "pnpm run": serve vue-cli-service serve build vue-cli-service build 解决办法

最新发布

03-17

<think>好的，我现在需要解决用户的问题：在Vue CLI项目中使用pnpm run命令时遇到了问题，特别是serve和build脚本相关的错误。用户希望知道如何修复这些问题。首先，我要回忆一下Vue CLI项目通常的结构和依赖管理。Vue CLI项目一般会在package.json里定义scripts，比如serve用于启动开发服务器，build用于生产构建。用户可能使用pnpm代替了npm或yarn，而遇到了一些兼容性问题。接下来，我应该考虑pnpm和npm之间的差异。pnpm使用硬链接和符号链接来管理node_modules，这可能导致某些模块路径解析的问题，尤其是当项目依赖某些可执行文件时，比如vue-cli-service。根据引用[2]，当运行npm run serve时，会通过node_modules/.bin/vue-cli-service映射到cli-service/bin/vue-cli-service.js。如果pnpm的node_modules结构不同，可能导致这个映射失效，从而找不到命令。可能的解决方案包括： 1. 检查node_modules是否存在，确保依赖已正确安装。可能需要删除node_modules和pnpm-lock.yaml，然后重新安装。 2. 使用pnpm dlx来执行命令，或者在scripts中显式调用vue-cli-service的路径。 3. 检查package.json中的scripts是否正确，可能需要调整路径。 4. 设置shamefully-hoist=true，因为某些包可能依赖提升的依赖。 5. 确保Vue CLI相关依赖如@vue/cli-service是否正确安装，可能需要重新安装或更新。另外，引用[3]提到直接调用webpack(config, callback)，这可能与构建过程有关。如果build脚本出错，可能需要检查webpack配置是否正确，或者依赖是否完整。需要分步骤指导用户检查依赖安装、node_modules结构、scripts配置，以及可能的pnpm配置调整。同时，结合用户提供的引用内容，特别是引用[1]关于npm install和镜像设置的部分，可能需要检查依赖安装是否正确，或者是否存在镜像源的问题，但用户的问题是关于pnpm的，所以镜像问题可能不是主要原因，但可以建议检查网络或镜像设置。最后，生成相关问题时要围绕pnpm与Vue CLI的兼容性、依赖管理、脚本配置等方向展开。</think>针对Vue CLI项目中使用`pnpm run`命令出现脚本执行错误的问题，以下是分步骤解决方案： ### 1. 验证依赖完整性首先删除现有依赖并重新安装： ```bash rm -rf node_modules pnpm-lock.yaml pnpm install ``` pnpm的严格依赖树可能导致某些CLI工具路径异常[^2]，重装可修复路径映射问题 ### 2. 显式指定二进制路径修改`package.json`中的scripts： ```json { "scripts": { "serve": "node_modules/.bin/vue-cli-service serve", "build": "node_modules/.bin/vue-cli-service build" } } ``` 通过绝对路径调用可执行文件可规避路径解析问题 ### 3. 提升依赖层级创建`.npmrc`文件并添加： ``` shamefully-hoist=true public-hoist-pattern[]=*vue* ``` 这会提升Vue相关依赖到顶层node_modules，解决部分模块加载问题 ### 4. 检查CLI服务版本确保安装正确版本的@vue/cli-service： ```bash pnpm add -D @vue/cli-service@^4.5.0 ``` 版本不匹配可能导致API变更错误[^3] ### 5. 验证webpack配置检查项目根目录是否包含有效vue.config.js： ```javascript module.exports = { configureWebpack: { resolve: { symlinks: false // 禁用符号链接解析 } } } ``` 此配置可适配pnpm的链接特性 ### 6. 清除缓存 ```bash pnpm store prune rm -rf ~/.pnpm-store ``` 清理无效缓存文件可能解决幽灵依赖问题