vue项目打包后出现css文件路径找不到

最新推荐文章于 2024-06-21 18:48:03 发布
原创 最新推荐文章于 2024-06-21 18:48:03 发布 · 5.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讲解了如何在Vue项目中优化打包配置，包括修改路径设置、调整css图片导入方式及控制map文件生成，以实现更高效、轻量的项目部署。

vue项目打包后默认是绝对路径项目的根目录下：
将绝对路径改为相对路径：config/index.js
在这里插入图片描述
css样式中导入的图片找不到：build/utils.js
在这里插入图片描述
打包后默认会生成map文件：改成false将不生成map文件减少文件大小
在这里插入图片描述

want、
关注
解决vue打包css文件中背景图片的路径问题
10-18
总结一下，解决Vue打包后css文件中背景图片路径问题的关键在于合理配置publicPath。在实际操作过程中，我们既可以在Webpack的配置文件中设置，也可以通过vue.config.js来进行更灵活的配置。正确的路径设置能确保在...
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...
Vue-cli 打包CSS、JS找不到路径问题，解决方案
壹米阳光
07-23 3280
Vue-cli 打包CSS、JS找不到路径问题，解决方案 vue文件打包之后发现路径报错，检查了index文件之后发现js和css的路径为这样,发现static前面多了一个斜杠，所以导致路径错误… <script type=text/javascript src=/static/js/app.f8d4e6b6692427d014f5.js> 解决方案: build目录下的web...
vue 自建的css文件打包后找不到
wangooo的博客
09-21 1466
vue中使用固定的css文件
Vue 项目打包之后，CSS 找不到问题
空晓天
01-23 8991
Vue 项目打包之后，CSS 找不到问题 记录日常开发中遇到的 坑 问题：我把vue项目打包之后放在本地的web环境下可以正常显示，但是我放到 nginx 服务器之后，找不到 css 文件，当时配置如下图 解决办法： 我将 打包的路径从 ‘/v4/’ 改成 ‘./’ 就可以了，在web环境上上，可以放在任何文件下都可以，只要把站点的运行路径指向该文件夹就好 这是我的一种解决办法，如果大家还有什么解决办法，可以在下方留言哦嘻嘻 ......
新版本vue-cli打包之后没有css文件
最新发布
qq_30351747的博客
06-21 601
新版本vue-cli打包之后没有css文件
vue 打包 码云 pages服务 显示找不到css js
www_lyh_624的博客
03-28 863
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
综上所述，解决nginx部署Vue项目时找不到js和css文件的问题，关键在于正确设置Webpack打包时资源引用的基础路径。对于vue-cli@3，你需要在vue.config.js中配置baseUrl；而对于vue-cli@2，则需要修改config/index.js...
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
这一问题经常出现在Vue项目打包后，尽管文件可以被正确找到，但引用的资源文件，如字体和背景图片等却无法正确加载。这一问题主要与资源路径的配置有关。本文将详细介绍如何解决Vue项目打包时样式及背景图片路径无法...
vue-cli设置mode环境变量打包之后没有CSS文件
yuanqi3131的博客
12-29 1487
如下图设置了–mode xxb之后打包，只有js，img等文件夹却没有CSS文件夹。
vue打包编译后找不到css中的图片
changyandou2020的博客
09-07 661
vue打包编译后找不到css中的图片
vue项目打包后，css兼容性样式前缀消失解决方案～
草莓不爱吃白菜的博客
09-11 2074
用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了，自己不需要做什么改动就会自动加前缀： 但是本小仙女在开发过程中，发现一个问题，OMG# ~~~~~ # 项目打包前后的样式怎么会不一样？？？譬如： 这个css3中设置背景渐变的属性吧，打包后在谷歌浏览器里面竟然不兼容。打开控制台一看，咦？属性前缀肿么没有了？？？ 网络上面找解决方法，看下面???? 我们可以分析对比下bui...
vue3+vite项目打包后css样式丢失
m0_66879773的博客
03-13 5705
可以禁用 CSS 代码分割，这样 CSS 样式将会内联到 JavaScript 中，而不是被提取到单独的 CSS 文件中。这种方式可以解决一些样式丢失的问题，因为样式将直接包含在构建后的 JavaScript 文件中，而不会受到代码分割的影响。默认情况下启用了 CSS 代码分割，CSS 样式会被提取到单独的 CSS 文件中，会导致一些样式丢失的情况。在vite.config.ts文件中加入 cssCodeSplit: false,
关于vue打包后访问js,css路径不对的问题
Chris__wang的博客
01-04 8672
vue打包后打开index.html后发现页面无显示，原来是js,css路径不对，解决办法如下 css：build/utils 新增一行代码 js：config/index.js   路径改成./     注意只需要改build对象下的路径，dev下的路径不要改，不然本地跑步起来 【右上角点个赞，谢谢】 ...
vue打包后导致css属性值丢失的问题如何处理？
4G/5G随身WiFi专业DIY改装
11-01 1463
当使用Vue进行打包时，有时可能会出现CSS属性值丢失的问题。这通常是由于CSS的压缩和优化过程导致的。下面是一些可能的解决方案：关闭CSS的压缩和优化：在Vue的配置文件(vue.config.js)中，你可以通过添加以下配置来关闭CSS的压缩和优化：module.exports = { css: { ext...
如何解决vue打包项目中的图片,静态css,js 不能访问路径问题
weixin_43962555的博客
02-22 1791
1.在书写代码的时候按照相对路径引入； 2. 但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的； 实际写的代码 &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;div class=&quot;logo&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;img src=&
vue打包静态资源后显示空白及static文件路径报错填坑
热门推荐
谭少.居然的博客
09-05 2万+
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。...
vue cli3.0如何定位css所在的vue文件及行数
Two_Too的专栏
05-13 2164
1.第一种： 老版本的在config里面index.js，设置 cssSourceMap:true 2.第二种： 在vue cli3.0版本，新建vue.config.js文件在其中配置 css:{ sourceMap: true } 配置完成后，重启项目，打开谷歌调试 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值