Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题

最新推荐文章于 2024-05-28 17:27:23 发布
最新推荐文章于 2024-05-28 17:27:23 发布
阅读量605 收藏 1
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxueyingying/article/details/137329289
版权

vue项目npm run build打包发到服务器上，背景图片消失

问题

登录页背景图片丢失
在这里插入图片描述

控制台报错

在这里插入图片描述

  1. 找到我们的 config文件夹下面的 index.js 配置文件
  2. 找到其中的 build 相关配置，assetsPublicPath 这一项默认配置的是‘/’ 我们将他改成 ‘./’
    在这里插入图片描述

修改后

在这里插入图片描述

修改完成后，重新打包即可

如果还没有解决问题，继续配置

1.找到config下的index.js文件 将build下的assetsPublicPath的斜杠换成./
在这里插入图片描述

  1. 操作如下 修改build/utils.js，添加publicPath:'../../’
    在这里插入图片描述

修改完成后，重新打包即可

第二个就是我们的路由文件中 如果要是选择的是 history 模式 我们需要将其注释掉
在这里插入图片描述

修改完成后，重新打包即可

蓝胖子的多啦A梦
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
干货满满，解决vue打包后静态资源路径错误的问题，3个月学会前端开发
2401_83739434的博客
04-08 514
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的webpack.base.conf.js看代码：.*)?$/,options: {limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64},
vue 打包路由报错_electron,webpack_electron + vue2.0 + webpack + vue-router 打包项目后，路由无效？，electron,webpack,vu...
weixin_30670123的博客
02-22 827
electron + vue2.0 + webpack + vue-router 打包项目后，路由无效？electron + vue2.0 + webpack + vue-router 打包项目后，以index.html/login 这样的形式访问不了路由，在开发模式下，用http:localhost:8080/login这样是可以的。我也找过一些资料，问过一些群的朋友，说是要建立web服务，但是...
手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题
weixin_58115275的博客
09-08 4472
解决vite打包后路由失效的问题
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目...
weixin_30596023的博客
07-07 904
使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这个静态资源会报404) outputDir: 'dist',//打包后的目录名称 assetsDir: 'static'//静态资源目录名称 } router.js ...
nginx 引用vue打包的静态文件_使用vue-cli3.x正确打包项目的,解决静态资源与路由加载无效的问题...
weixin_29002595的博客
02-08 294
使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容vue.config.jsmodule.exports = {publicPath: './',//打包后的位置(如果不设置这个静态资源会报404)outputDir: 'dist',//打包后的目录名称assetsDir: 'static'//静态资源目录名称}router.jsexport default new Router...
vue项目打包解决Vue Router加载无效(404)报错 No such file or directory
master_hunter的博客
03-15 1199
在写Vue3项目的时候，使用了Vue Router前端路由，配置为history模式。进行项目打包上传到服务器的时候，正常测试访问页面，当刷新当前路由的时候，就会出现404的状况，检查日志发现全是No such file or directory目标路径的问题。
Vue3+vite2打包路径和路由router-view不显示问题
weixin_43575792的博客
01-23 7433
Vue3+vite2打包路径跳坑前言一、打包默认路径二、css的@charset UTF-8规则三、路由router-view不显示总结 前言 博主使用vue3+vite2打包项目部署到服务器上时遇到几个有关路径的坑，将这些坑的原因及解决方法提供给大家，希望大家可以有所收获 一、打包默认路径 以前在vue2+webpack中我们在vue.config.js配置publicPath设置静态资源访问路径，但现在使用vue3+vite2环境我们需要在vite.config.js里面配置base;顺便一提，里面的
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误
m0_67392273的博客
03-11 4772
问题描述： 在用Vue3 + Ts进行项目开发，通过Vite进行构建打包后，直接在本地以文件系统的方式，用浏览器直接打开打包生成后的dist目录下的index.html文件访问时，浏览器页面显示空白、打开控制台后有报错、该路径找不到对应的文件。 原因1： 由于index.html文件中，引用的相关资源文件的路径不正确导致在加载文件资源时失败，因为在大多数开发过程中，这个静态资源引用加载的前缀 默认是 “/”。 解决方法： 在项目根目录中打开vite.config.ts文件，如果没有应该文件就手动创建一个(
vuecli3打包发布后无法访问静态资源（404）
热门推荐
Tino's Space
09-29 1万+
场景 vuecli3或者vuecli4项目，本地运行可以正常访问静态资源，打包发布到线上后，通过域名访问后无法访问到静态资源，也就是404 原因分析 1.配置的映射域名并不是在根域名下，而是在次一级的location下，而publicPath配置的确实绝对路径"/" 关于publicPath的配置，vuecli官方给了详细的解决办法，即是把vue.config.js中的publicPath改成相对路径，网上大部分人都是这么说的，然儿并不能彻底解决这个问题。 https://cli.vuejs.org/zh/
解决vue打包部署nginx非html根目录时，无法访问页面，无法加载静态资源，显示空白页
weixin_44923168的博客
09-17 9304
项目部署到html子目录下，无法加载静态资源 vue项目部署到nginx的html目录下子路径，在nginx配置好子路径后，使用子路径一直无法放到到静态资源，本文中nginx的配置都是在监听80端口下, #nginx配置监听80端口的部分配置 server { listen 80; server_name localhost; #charset koi8-r; client_max_body_size 1024M; charset utf-8; #access_l
解决vue打包之后静态资源图片失效的问题
08-28
下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
主要介绍了vue cli3.0打包上线静态资源找不到路径的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 613
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
vue实现附件下载 & 获取到接口的图片，设置宽度100%样式
最新发布
weixin_48596030的博客
05-28 80
vue实现附件下载 & 获取到接口的图片，设置宽度100%样式+++
宝塔部署Java+Vue前后端分离项目
liyh722的博客
05-28 170
宝塔部署Java+Vue前后端分离项目
Vue 怎么定义插件以及使用这个插件
u010373106的博客
05-22 282
Vue.js插件是一种增强Vue功能的方式，它允许你向Vue中添加全局功能，比如全局方法、指令、过滤器、混入等。
vue3+ts+vite 路由懒加载 打包失败
06-02
打包失败的原因可能有很多，以下是一些可能的原因和解决方法： 1. TypeScript 类型错误：使用 TypeScript 时，可能会出现类型错误，导致打包失败。请检查代码中的类型定义是否正确，是否存在拼写错误等问题。 2. 路由配置错误：使用路由懒加载时，可能会出现路由配置错误的问题，导致打包失败。请检查路由配置文件，确保每个路由都正确配置了懒加载。 3. Vite 插件问题：使用 Vite 时，可能会出现插件问题，导致打包失败。请尝试升级 Vite 版本或者禁用部分插件，查看是否能够解决问题。 4. 网络问题：在打包过程中，可能会出现网络问题，导致打包失败。请确保网络连接稳定，并且没有被防火墙等安全软件阻止。 如果以上方法无法解决问题，请提供更多的错误信息，以便更好地排查问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值