vue打包后路径失效、找不到、404的问题

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

#vue.js #javascript #前端

本文介绍了解决Vue项目打包后，本地打开出现css、js路径404问题的方法。通过修改vue.config.js文件中的publicPath参数，从'/ '更改为'./'，确保资源加载正确。

vue打包路径丢失的问题
在vue项目打包以后，本地打开项目会出现css、js路径404的问题，这是因为vue打包后的路径默认是根路径。
解决方法：
在vue.cofig.js文件中将 publicPath: ‘/’, 更改为 publicPath: ‘./’,（如果没有vue.cofig.js文件，需要自行创建一个）

在这里插入图片描述

vue 打包后找不到路径
周家大小姐
01-07 3592
在打包后发现点开dist方件;浏览器中一片空白; 我们需要在config文件下的 把 assetsPublicPath: "/", 变成: assetsPublicPath: "./", 这个可以让他变成相对路径  把: productionSourceMap: ture, 变成: productionSourceMap: false, 因为这个东西在打包的时候会给你生成很多Sour...
解决Vue打包之后文件路径出错的问题
11-29
这里以vue-cli创建的项目为例 1、文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build（上边还有个dev 是开发环境下的配置，不需要改动）下的 assetsPublicPath ：将‘/’改为‘./’ 2、背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可。 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
weixin_39963465的博客
12-13 169
学习前端的小伙伴越来越多，问题也就越多，前面基础部分还好一些，特别是一到框架的时候，难住了一大部分人，今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题，有兴趣的小伙伴可以看一下。刚新建的vue-cli项目，同事说要打包一版进行测试，打包完成后放在tomcat上发现路径报错问题。百度了一下，怀疑是build里面没有定义路径问题，度友提供了解决方案：找到confi...
VUE打包后不显示问题
qiankui的博客
06-09 3520
在运行 npm run bulid后，打开dist目录下打包好的文件，不显示仍和数据 页面打开一片空白，原因是打包时，路径不对 解决办法： 在根目录新建 vue.config.js ，这个文件是vue规定好的，专门用来做bulid里面的配置 module.exports={ baseUrl: process.env.NODE_ENV=='production'?'./':'/...
【vue3】defineAsyncComponent构建后路径错误解决
IU
05-22 2271
{这在我本地运行的时候，可以打开没有问题。但是构建到prod后文件指向错误。vite build后dist文件夹中没有生成动态导入的文件。
基于vue打包后字体和图片资源失效问题的解决方法
08-27
在Vue项目中，如果你直接在CSS文件中引用了`font-awesome`的字体文件，打包后可能会找不到这些字体文件。这是因为Webpack默认不会处理字体文件，我们需要在`webpack.config.js`或者Vue CLI的配置文件(`vue.config.js...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
综上所述，当Vue CLI+Webpack项目打包到服务器后出现字体找不到的问题时，主要的解决方法是更新Webpack的配置，特别是`ExtractTextPlugin`和`url-loader`的`publicPath`，确保它指向正确的字体文件位置。同时，对于...
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
vue打包后 hash模式 跟子目录 静态文件路径 分析
LikeStudyBoy的博客
09-03 1538
hash 根目录 background: url('/static/logo.png') no-repeat center/ 50%;    跟路径 / 和 相对路径 <img src="/static/logo.png" alt="" srcset="">    跟路径 / 和 相对路径 <div class="i...
vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
qq_35859392的博客
12-11 694
vue-cli构建的vue项目打包后css引入的背景图路径不对的问题 使用vue-cli构建vue项目后，再打包遇到一个css引入的背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 　　 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项...
vue项目打包需要修改的路径问题
知其白，守其黑；和其光，同其尘。
03-09 6486
博客园 首页 新随笔 联系 管理 订阅订阅 随笔- 55 文章- 0 评论- 1 vue-cli项目打包需要修改的路径问题 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问...
Vue 打包路径设置丢失：解决办法
TechPulseZ的博客
09-26 914
在 Vue.js 中，打包路径设置是确保应用程序资源正确加载的关键。在 Vue.js 中，打包路径的设置非常重要，它决定了在生产环境中应用程序的资源引用方式。然而，有时候我们可能会遇到 vue 打包路径设置丢失的问题，导致资源无法正确加载。Vue 打包路径设置的目的是确保在构建应用程序时，所有的资源路径都正确地指向打包后的文件。这样可以使您的应用程序更具灵活性，可以根据不同的环境自动设置路径。完成上述修复步骤后，您需要重新构建应用程序，以使新的打包路径设置生效。根据您的项目需求，将路径设置为正确的值。
2024年最新解决vue打包后静态资源路径错误的问题(1)，闭关在家37天“吃透”这份345页PDF
最新发布
2401_84617731的博客
05-07 684
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64。跟C,Java中的this有什么区别？js的基本类型有哪些？事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？显示原型和隐式原型，手绘原型链，原型链是什么？14.说一下 Vue 和 React 的认识，做一个简单的对比。13.route 和 router 的区别是什么？
Vue.js打包静态网页出现空白或路径错误的问题解决方案
进击的小宇宙
04-23 5398
一、 问题描述 用脚手架vue-cli编写的工程，使用”npm run build”打包出静态网页，不管是直接打开还是放在服务器里，都是空白一片，检查日志或者网络请求发现路径错误。 二、 问题原因 脚手架配置文件中路径需要修改。 三、 解决方案 1. 找到”/config/index.js”文件，build部分，将”assetsPublicPath”值改为”./”，...
vue打包之后css路径问题
空那个白的博客
09-30 1092
你是否遇到过vue项目在本地运行没问题，但是打包放到Tomcat之后页面无法显示，控制台报错，提示css，js等路径找不到的情况呢？反正我上次遇到了，所以这里做个笔记吧~~~ 直奔重点~~~解决办法如下： 这样操作后可能还会存在某些图标字体无法显示，此时需要改动另一个地方~~~ 在utils文件里如下截图位置，增加这一句代码：“publicPath:'../../'” ...
vue build 后资源路径不对
热门推荐
令瑞斌
10-14 1万+
vue 打包后资源路径不对，本质是配置错误。在index.js中，要分开配置build 与dev时的路径。 图上是我的资源目录，图下是我的配置文件dev 下，不需改动配置，run dev 即可。 build时，将assetsPublicPath 的路径换成服务器上对应的根目录。 如我的项目在服务器上路径为XXx.hive.cn/vue/ 。直接访问XXx.hive.cn/vue/index.
前端打包history模式下出现的路径丢失问题刷新页面404问题
m0_53164768的博客
05-24 411
前端打包history模式下出现的路径丢失问题刷新页面404问题
解决VUE项目打包路径错误，以及自定义打包
mo_jiu的博客
02-23 1544
做vue项目的时候碰到打包上线白屏的问题，这里我使用了一种方式就解决了；在config文件夹中的index.js里找到build里面的  assetsPublicPath: './' 原本它是 assetsPublicPath: '/'  换成 './'即可。 我们打包完的项目一般都是存在dist文件夹中，会有一个index.html和一个static文件夹存放js，css等；如果你不希望...
vue3打包后代理失效
07-14
Vue3打包后代理失效可能是由于Vue3的打包配置问题导致的。 首先，我们需要确定是否在Vue3项目中使用了代理配置。代理用于在开发环境中将请求转发到其他服务器，方便调试。在Vue3中，常常会在vue.config.js（或类似...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雾里桃花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值