vue--前端部署项目后访问静态资源404

最新推荐文章于 2024-04-03 10:18:49 发布
最新推荐文章于 2024-04-03 10:18:49 发布
阅读量3.5k 收藏 5
点赞数 1
分类专栏： 前端小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41851906/article/details/113468222
版权

这里写目录标题

问题原因

本质原因是路径的原因。
可以看下前端发出的静态文件的请求路径，再对比一下服务器上放置静态你文件的路径。会发现二者路径不一致。

解决该问题

在这里插入图片描述
修改vue.config.js文件中的publicpath地址。将路径变成想相对路径后，访问静态文件的路径就正确了

番茄红了
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue-cli3项目打包时，静态资源请求失败 404
weixin_40141473的博客
08-16 8822
1. 首先放一张项目的目录： public文件夹 存放 index.html以及一些json文件。 src -> assets 文件夹下存放一些需要的图片。 src -> components 文件夹下存放每个模块的组件。 src 目录下是App.vue、main.js、router.js、store.js文件。 2. 在执行 npm run build 后，项目多了一个d...
前端 vue 下载本地静态资源 提示找不到文件
Yoga99的博客
05-11 2248
是用a标签download属性 文件放在static和assets里都显示未找到文件 将需要下载的文件资源 public 下即可 <el-button icon="fa fa-file" label="下载模板" type="primary" @click="handleDownload" /> handleDownload: function () { let elink = document.createElement('a') elink.href =
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
最新发布
蓝胖子的博客
04-03 913
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
vue+ elementUI 打包发布到服务器后，element-icons.woff文件404
weixin_30315435的博客
05-16 3156
vue项目打包部署到服务器，静态资源文件404 js文件404问题 　　 原因：打包的项目静态资源的路径需要设置为绝对路径。如果是相对路径会出错 　　　　解决办法：修改config/index.js文件，将assetsPublicPath修改为'./'　　 element-icons.woff 文件 404 ...
微前端 qiankun webpack打包后静态资源路径404问题解决
weixin_45020094的博客
12-07 6352
首先出现静态资源加载失败的原因是路径问题， 子应用的路径被父应用影响，解决方法 你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url { output: { publicPath: `//localhost:${port}`, } } 借助 webpack 的 url-loader 将字体文件和图片打包，小文件转 base64 ，大文件注入路径前缀 vue cli2写法 const publicPath = process.env.NODE_ENV ===
vue 项目放在服务器上 静态资源路径不对报404错误
yongyafang123的博客
07-16 3899
出现问题： vue项目本地运行正常，npm run build之后，将dist文件上传至服务器之后，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白。 分析原因： 路径不对，找不到对应的status文件夹，有两种修改方式，一种是修改为相对路径，一种是修改为绝对路径。 以相对路径为例 解决方案： 将 ’ / ’ 改成 ’ ./ ’ 然后重新打包部署，访问就可以了 ...
springboot项目静态资源访问404路径问题
javaargs的博客
04-26 2207
1.Springboot自身静态资源访问有默认路径！！！ classpath:/META-INF/resoutces/ classpath:/resoutces/ classpath:/static/ classpath:/public/ 我们在前端页面中添加资源的时候一定要注意路径的书写，如果自己建了 static 文件夹就不需要在路径上面写/static了，不然会访问不到资源 2.模板引擎的路径配置注意别和Springboot冲突（遇坑点）！！！ 我在使用模板引擎freemarker的时候，在ap
nginx部署访问vue-cli搭建的项目的方法
08-28
Nginx 部署访问 Vue-cli 搭建的项目的方法 在本篇文章中，我们将详细介绍如何使用 Nginx 部署访问 Vue-cli 搭建的项目。该方法主要面向使用 Vue-cli 搭建的项目，并且使用 Nginx 作为反向代理服务器，以便实现项目...
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 项目部署到 Nginx 服务器是将构建后的静态资源发布到 Nginx 服务器上，以便通过 Nginx 提供服务。 1. **Nginx 安装与基本操作** - Nginx 是一款高性能的 HTTP 和反向代理服务器，可以在多种操作系统上运行...
fastapi-vue-crud:在同一项目中测试具有FastAPI后端和Vue.js前端的项目
03-12
FastAPI + Vue.js单页应用程序灵感来自于，这是一个使用以下语言的多语言项目： FastAPI作为server/文件夹中的后端API， Vue.js作为client/文件夹中的前端JS框架有关安装和运行后端和前端的信息，请参阅子文件夹中的...
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
总的来说，vue-cli帮助开发者快速搭建了一个具备基础功能的VueWebpack项目，包括模块化构建、热加载开发环境、路由管理、静态资源处理等。随着项目的深入，还可以自定义webpack配置，添加本地mock数据支持，以满足更...
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
`assetsSubDirectory` 和 `assetsPublicPath` 是 Vue CLI 中两个重要的配置选项，它们决定了应用中静态资源的组织和访问方式。 1. **assetsSubDirectory**： `assetsSubDirectory` 是配置在 `config/index.js` ...
springMVC静态资源
weixin_30593261的博客
04-27 42
静态资源放在哪　 　 　　　静态资源不要放在WEB-INF里面，放在和WEB-INF同级的目录里，一起放在webapp下，原生tomcat中，这里的资源可以直接访问。 springmvc配置怎么写 <!-- 大部分情况下必须加 为了更好的处理静态资源--> <mvc:default-servlet-handler/> <m...
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/
SpringMVC配置静态资源访问
淡小生
04-28 450
有时，我们可能需要直接访问一些静态资源文件， 如.html等等。 就.html文件来讲，此类文件在我们项目中访问,若依旧使用访问jsp文件的方式,或者是直接通过写路径访问的话，你会 发现根本不能访问得到它。 针对这个问题，特意网上搜寻了资料.找到了解决的方案： 在项目的Spring-servlet.xml文件中添加如下 代码： //指定根目录下的所有.html文件都可访问。
使用nginx部署qiankun微前端遇到404的问题
qq_39784865的博客
08-18 4356
微前端主项目运行npm run build 命令行打包之后，把dist文件夹里面的文件，部署到nginx后，对nginx的配置文件conf/nginx.conf进行以下配置，配置最重要的那一步之后，就不会再出现点击子项目刷新页面出现报404的问题了。 ...
将前端代码布置到服务器端后找不到静态资源
u014266077的博客
12-09 7703
将前端页面代码布置到服务器SpringMVC后，经常出现静态资源找不到的问题。 首先，应该设置springMVC，使其不要拦截静态资源。在springMVC的配置文件中添加如下代码：<mvc:annotation-driven /> <mvc:resources location="/image/" mapping="/image/**"/> <mvc:resources location
解决vue打包后静态资源路径错误的问题
没做过产品的后端不是个好前端
08-05 5220
vue项目完成的最后一步就是打包部署上线，但是打包部署的过程往往不是那么一帆风顺的，现将遇到问题和解决方案记录如下。 图片路径问题 起因：页面中引入资源的方式往往有如下几种 * HTML标签中直接引入图片， 如 <img src="../assets/images/index.png"> * JS代码中定义资源路径属性，如src: require('../assets/images/i...
vue打包静态资源后显示空白及static文件路径报错
weixin_33851604的博客
01-23 1384
1、打包之后打开dist的页面显示空白： 　　这个是打包项目比较常见的一个错误 　　改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。 　　 　　 　　2.src里边router/index.js路由配置里边默认模式是mode:'hash'（页面会在路由上加...
springboot+vue-admin-template
07-28
Spring Boot是一个用于构建Java应用程序的开源框架，而Vue-admin-template是一个基于Vue.js和Element UI的后台管理模板。 结合Spring Boot和Vue-admin-template，可以搭建一个前后端分离的Web应用。具体步骤如下： 1. 创建Spring Boot项目：使用Spring Initializr创建一个新的Spring Boot项目，添加所需的依赖，如Spring Web、Spring Data JPA等。 2. 创建前端项目：使用Vue-cli等工具创建一个Vue.js项目，并选择Vue-admin-template作为基础模板。在项目中安装Element UI和axios等插件，用于构建后台管理界面和发送HTTP请求。 3. 配置跨域：在Spring Boot中配置跨域访问，以允许前端项目与后端进行通信。 4. 开发后端接口：根据具体需求，在Spring Boot项目中编写控制器类和服务类，处理前端发送的请求，并返回相应的数据。 5. 开发前端页面：在Vue-admin-template中的src/views目录下创建相应的页面组件，使用Element UI组件库构建界面，并通过axios发送HTTP请求与后端进行交互。 6. 部署运行：将前端项目打包生成静态文件，将其放置在Spring Boot项目的静态资源目录下。然后将整个项目打包成可执行的JAR文件，部署到服务器上运行。 通过以上步骤，你可以搭建一个基于Spring Boot和Vue-admin-template的前后端分离的Web应用。在开发过程中，你可以根据具体需求进行扩展和定制化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值