VUE前端代码打包后上传到服务器上js css 文件404

最新推荐文章于 2023-06-27 17:24:55 发布
最新推荐文章于 2023-06-27 17:24:55 发布
阅读量2.6k 收藏 6
点赞数
文章标签： VUE前端代码打包后上传到服务器上js  css 文件404
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_13201/article/details/103065052
版权

VUE前端代码打包后上传到服务器上js css 文件404

一：问题现象

在这里插入图片描述
用服务器网址访问后，出现js css 文件404
二：问题产生原因
1：前端项目是打包完成后传给后台，打包的时候所有的文件路径都是绝对路径
2：讲道理目录不能有什么/monitor，不用跟后缀的，就可以直接访问项目的index.html文件
三：解决办法
在webpack中加上一句话

// moitor 是后台自己加的一个目录
publicPath： '/monitor/'

打包后的绝对路径就要配上monitor了
在这里插入图片描述
四：注意事项
1：这样我所有的资源路径打包后就都会多一个monitor路径
2：以后他的目录要是变了, 你要重新打包的, 用的绝对路径

Jack_13201
关注
vue 打包后的文件部署到express服务器上的方法
08-29
本文将详细介绍如何使用Vue.js、Webpack和Express进行前后端分离的开发，并阐述将Vue打包后的文件部署到Express服务器的过程。 1. **Vue项目初始化** 使用`vue-cli`初始化项目是创建Vue应用的第一步。运行`vue ...
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 build 部署在tomcat后 css 与 js 404,无法找到
jwl965278523的专栏
06-05 1653
问题描述 vue build 后，生成的dist文件扔到 tomcat/webapp/（先清空文件夹） 下，可以改一下dist为项目名； 启动tomcat，前端输入 localhost:8080/project ，F12无法找到 css/js/png等静态资源。 探索 网上很多讲了解决方法，试了几个不行。有的也能提供思路。可能用的打包配置不一样吧。 思路 但根本的思路应该是： 查看dist文件夹中的index.html文件，找一个 css、js或png的链接，查看其引用路径是否正确； 是从根目录还是相对路径
生产环境，vue页面跳转的时候，js报404的问题
weixin_30800807的博客
04-09 1659
最近上线的一个vue项目，需要各种路由跳转，在开发和测试环境都没问题，但是在生产环境，发现后期更新代码的时候，有些机型（ios机型，暂未发现android有问题）跳转路由的时候，标题修改了，但是内容并没有显示。抓包后，发现跳转的时候，js文件报404。 在查阅资料后，找到了原因。因为怕影响首屏的加载速度，所以使用vue-router的懒加载机制，当用户刷新页面时，防止webpack打包...
前端打包VUE 到线上刷新页面居然会404,原来是这个原因！
万神小栈
05-10 688
将vue路由模式mode: ‘history’ 修改为 mode: ‘hash’配置文件里，添加如下代码，再刷新就OK了。
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改，改为 目的是将资源文件的引入路径，改为相对地址（相对index.html） 二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径 此时的
vue打包发布后css文件404
AD_Camilk的博客
08-12 1175
vue打包发布后文件404
vue项目打包部署到服务器上后页面404问题
热门推荐
qq_45963071的博客
11-24 1万+
当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网。我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决。
vue打包js和css404，存在缓存
小鄧同学的博客
08-05 1858
前言 当vue打包文件部署到线上时，会出现.js，.css文件404的情况，因为缓存原因，加载的js和css是之前的js和css，此文章用前端方法解决清除缓存的问题 1.index.html插入如下代码 <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> http-equiv
vue打包后字体图标丢失、部分静态资源404问题
weixin_55629817的博客
03-17 995
打包后字体图标丢失、静态资源404
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
这些文件会被放置在`dist`目录下，其中静态资源的路径可能受到`vue.config.js`（如果存在）或`config/index.js`（对于旧版Vue CLI）中的配置影响。 在描述中提到的一个常见解决方案是在`config/index.js`中修改`...
【JavaScript源代码】Vue项目打包部署到apache服务器的方法步骤.docx
12-29
完成上述配置后，再次执行 `npm run build`，将新打包的文件上传至服务器的 `ibms` 目录。此时，页面应该可以正常访问了。 然而，如果尝试通过URL栏直接访问子页面或刷新页面，可能会遇到404错误。这是因为Vue的`...
vue 打包项目放到线上刷新出现404的情况 解决方案
Myzhuo的博客
11-04 1302
location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; }
部署时报错css文件404
hhs231415的博客
10-29 1477
关于打包成功后部署时报错css文件丢失 1.npm run build打包后 打开dist目录的html文件报错 设置config–>index.js 找到build配置项: assetsPublicPath: '/', 设置成 assetsPublicPath: './', 成功访问后发包 结果。。部署报错css文件404 知晓部署后测试地址为 发现后面有/arcgis 于是。...
GitHub 部署静态网站（js 和 css 文件资源显示404）
qq_43651168的博客
06-27 2022
GitHub 部署静态网站（js 和 css 文件资源显示404）。GitHub 部署 vue 打包的静态文件，
解决webpack vue 项目打包生成的文件，资源文件均404问题
aiyaya2016的博客
01-08 431
　　最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改，改为 目的是将资源文件的引入路径，改为相对地址（相对inde...
JS、CSS文件引入、导入404问题，引入报错。
u013727594的博客
04-26 5411
打印台错误提示：org.springframework.web.servlet.PageNotFound.noHandlerFound No mapping found for HTTP request with URI [/MANO_APP/assets/js/jquery-1.11.0.js] in DispatcherServlet with name ‘dispatcherServlet页面
electron-vue-admin 打包请求反馈403
卉翊的博客
06-08 804
electron-vue-admin 请求反馈403
weixin021基于JAVA微信点餐小程序设计+ssm.rar
最新发布
09-13
所有源码，都是可以运行起来的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值