vue打包静态资源路径不正确的解决方案

最新推荐文章于 2024-06-19 16:59:45 发布
最新推荐文章于 2024-06-19 16:59:45 发布
阅读量6.4k 收藏 6
点赞数
文章标签： Vue 打包 build 静态资源 路径不正确
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiechengjian/article/details/79640404
版权
在Vue项目打包上线时常遇到静态资源路径问题，包括js和css路径错误以及css内引用图片丢失。解决方法包括修改config/index.js，将assetsPublicPath设置为'./'来修复js和css路径；对于css内引用图片，可通过修改build/utils.js添加特定代码来解决打包后图片路径变化的问题。
摘要由CSDN通过智能技术生成
vue打包静态资源路径不正确的解决办法
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个
1、js，css路径不对
解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’

最低0.47元/天 解锁文章
Allin丶
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 988
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue cli 打包相对路径遇到的坑
qq_39047764的博客
03-19 973
<script src="/js/index.67b1c383.js"></script> 这个是vue打包之后的绝对路径，但是想要的是：<script src="./js/index.67b1c383.js"></script>这种相对路径 网上说的，大部分解决方案是修改publicPath: './', ，但是实际测试之后，还是有很大的问题 第一种打包设置：publicPath: './', 结果：<script src="js/chunk-..
vue本地运行项目获取static中文件找不到问题，更新不生效
最新发布
qq_35388369的博客
06-19 241
原因：由于运行配置了proxyTable代理 ‘/’，所有的网络请求都被代理，获取到静态文件实际上是代理服务器上的文件，所以本地修改static文件下的操作都不会生效。问题：vue本地运行项目，获取static静态文件夹中文件找不到，更新文件之后运行没有变化。解决办法：在全局代理’/'下，忽略掉static请求的代理。
Vue工程打包部署Tomcat，解决404、静态路径等问题
Young-weiai
04-20 3178
通常使用nginx部署会少很多麻烦，但是部署环境通常也不是开发程序员能够决定的。Vue部署Tomcat所遇到的静态文件问题、刷新问题通过以上配置修改，基本都能解决。解决不了的，欢迎留言讨论~
解决vue打包后静态资源路径错误的问题
没做过产品的后端不是个好前端
08-05 5307
vue项目完成的最后一步就是打包部署上线，但是打包部署的过程往往不是那么一帆风顺的，现将遇到问题和解决方案记录如下。 图片路径问题 起因：页面中引入资源的方式往往有如下几种 * HTML标签中直接引入图片， 如 <img src="../assets/images/index.png"> * JS代码中定义资源路径属性，如src: require('../assets/images/i...
vue静态资源打包中的坑与解决方案
u012963469的博客
04-13 938
1、问题 vue 经过 npm run build 打包后生成的css文件引入的静态文件（我的项目中是引入了字体文件）路径错误问题。 2、分析 查看项目中字体文件的引入路径为http://192.168.120.37/lx_form/static/css/static/fonts/element-icons.535877f.woff 而项目中的资源路径如下 index.html static/ |--js/ |--*.js |--css/ |--*.css |--fonts/ |--*.w
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
在使用Vue.js框架进行前端开发的过程中，经常需要打包应用以便将其部署到生产环境中。...通过上述的方法，可以较好地解决Vue打包静态资源后页面显示空白和static文件路径报错的问题，提高项目的稳定性和用户体验。
Vue打包后访问静态资源路径问题
10-16
Vue打包后访问静态资源路径问题的核心在于理解生产环境和开发环境的不同，以及正确配置静态资源的引用路径。通过修改`assetsPublicPath`、使用绝对路径、`require`引入或设置`publicPath`，可以有效解决这个问题。在...
解决vue打包之后静态资源图片失效的问题
11-27
在Vue项目开发中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，部署到服务器上时，部分静态资源，如图片，无法正常显示，浏览器控制台报404错误。这个问题主要与静态资源的存放位置及引用路径...
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
热门推荐
一键写代码的博客
07-23 2万+
几种设置publicPath后，再对比打包后的index.html文件 测试背景： 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录 部署的时候，前端打包的文件部署在服务器的一个静态资源目录下 我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。 打包后的文件目录： ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，既设置为''，部署后请求
Vue 打包 静态文件路径问题
hukang00的专栏
04-17 1914
一、js，css的路径不对 方法：找到 config/index.js，将其中的assetsPublicPath值改成’./’css assetsPublicPath:'./' 二、css中引用的图片资源找不到 方法：找到 build/utils.js，增长一行代码便可：html if(options.extract){ returnExtractTextPlugin.extract({ use:loaders, fallback:'vue...
vue项目部署服务器，static文件夹里文件路径不对报404
weixin_42981487的博客
10-12 4954
场景：vue项目本地运行正常，npm run build之后，将dist文件上传至服务器之后，在nginx配置完成情况下，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白。 原因：路径不对，找不到对应的static文件夹 方案： 有两种修改方式，一种是修改为相对路径，一种是修改为绝对路径。 以相对路径为例 解决方案： 将 ’ / ’ 改成 ’ ./ ’ 然后重新打包部署，访问就可以了。 参考于：vue 项目放在服务器上 静态资源路径不对报404错误_yongy.
Vue Cli 打包之后静态资源路径不对的解决方法
weixin_30783913的博客
05-23 5044
cli2版本： 　　将 config/index.js 里的 assetsPublicPath 的值改为 './' 。 build: { ... assetsPublicPath: './', ... } cli3版本： 　　在根目录下新建 vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改） module.expo...
解决Vue打包之后文件路径出错的问题
7酱的博客
06-25 4630
找到webpack.prod.conf.js，在webpack.prod.conf.js找到minify 把minify中的 removeAttributeQuotes: true改为 removeAttributeQuotes: false（如果该方法没有用那就把整个minify去掉再试一下） 然后再执行打包命令：npm run build
⚡vite 打包资源路径不对页面不显示
Mencre的博客
11-05 1万+
vite打包内部采用的是Rollup完成的应用打包，因为vite高度依赖ES Modules特性所以只支持现代浏览器，抛弃IE市场，如果你需要兼容IE需要另做处理，详情可以参考这里。 你只需要在终端执行 npm run build 打包过程轻松又愉快，先不要高兴的太早，这时候如果你打开 dist 文件下的打包文件会发现页面显示不出来，一拍脑门想起来在 vue.config.js 里面配置一下 publicPath: './'，不过当你做完这一切之后发现并没有解决问题，why？在这里先不要慌，只需要继续向下看
关于 electron-vue打包后静态资源路径失效的解决方案
aa661020的博客
03-30 2万+
关于 electron-vue打包后静态资源路径失效的解决方案 1.静态资源如css,img，js,请放在根目录的static文件夹里， 因为electron打包后会复制一份static文件夹到dist文件夹中 这样项目引入的静态资源就不会报路径错误了。 2.字体文件比较特殊，如果引入的是前端框架文件，引入的字体 路径不是我们能控制的。所以我们需要修改下C:\Users...
Vue打包与跨域解决方案：白屏谜题与代理设置
在Vue开发过程中，遇到打包后页面呈现白屏问题以及处理跨域...解决Vue打包白屏问题和代理跨域涉及配置文件的定制、路由模式的选择以及环境变量的管理。在开发过程中，理解这些概念并灵活应用是确保项目顺利运行的关键。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值