原始Vue+webpack打包后部署nginx报404

最新推荐文章于 2024-07-25 15:48:40 发布
最新推荐文章于 2024-07-25 15:48:40 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： 程序 文章标签： VUE nginx npm run build 404 部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38015462/article/details/80536503
版权

    项目npm run build 之后直接用nginx做为服务器访问静态页面有下列错误


检索页面发现


也就是说路径为绝对路径。更改路径的方式在目录中index文件


将其更改为相对路径即可


或者直接去除“/”也可。然后重新npm run build即可成功访问


qq_38015462
关注
专栏目录
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
vue 打包的静态页面 在nginx下出现404问题
chhnang2016的博客
07-29 1814
参考url :https://blog.csdn.net/weixin_34379433/article/details/91369530 配置nginx如下: location / { root /www/dist; index index.html index.htm; try_files $uri $uri/ /index.html; //映射到ind...
vue项目 部署到nginx 上刷新页面显示404
最新发布
qq_30517167的博客
07-25 1790
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
Vue项目webpack打包部署到Tomcat，刷新报404错
smollsnail的博客
01-10 7111
遇到的问题使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html但是看完问题又来了，官方给出的解决方案中没有说tomc
vue项目打包后部署nginx,找不到页面
yxyy3511的博客
03-26 3363
方式一：(mode:history) webpack.base.conf.js assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', // 注意是绝对路径 nginx 配置文件 http{ server { ...
vue项目部署后刷新页面404的原因和解决方案
为技术而生
03-11 9017
vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面。 扩展：当项目部署到服务器子文件路径时资源404问题。
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
在开发Vue.js应用程序时，通常会使用Webpack进行模块打包，以便于部署到各种服务器环境，如Apache、Nginx或Tomcat。然而，在部署到Tomcat时，由于Vue.js使用了HTML5 History模式，可能会遇到刷新页面时出现404错误的...
详解vue+webpack+express中间件接口使用
10-18
在现代前端开发中，Vue.js、Webpack 和 ...在理解上述内容的基础上，开发人员可以更好地构建和部署使用Vue+Webpack+Express的应用程序。同时，在配置和使用这些技术栈时，还需要注意安全性和性能优化等方面的问题。
vue项目webpack打包部署到服务器
qq_40126542的博客
04-18 2359
小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。 最近开发的项目遇到，记录下啦。 1.修改config文件夹下的index.js文件 2.修改build 文件夹下的 webpack.prod.conf.js 文件 添加红框部分 ...
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(webpack)项目在使用Nginx代理后, 热更新失效的问题
蔡永涛的博客
11-06 2568
本文专门解决疑难杂症, 并不是简单的教你怎么开启热更新, 这个默认就开启的, 而且网上一大堆教程(全是搬运工..哎) 如果你只是简单的使用 "localhost:端口" 来访问你的项目, 那么本文基本对你没用 问题描述, 我在本地开发Vue项目, 使用Webpack-server (也就是npm run dev) 还有想使用热更新 如果通过localhost:7060来访问是没有问题的,...
nginx配置vue-router+webpack项目部署访问刷新出现404问题
牧竹子
10-16 1万+
部署背景和问题描述项目使用的是vue2.0,vue-route,webpack打包 项目部署使用的nginx 问题描述： 正常首页不加index可以访问 如：浏览器输入192.168.0.251可以正常访问并返回 但是当按下F5或者刷新页面时就出现如下404错误 这还是不是最明显的最明显的如这种目录192.168.0.251/user 基便不刷新而只是访问依然是报的404原因打开开发包
Nginx启动不起来怎么办？Nginx启动失败原因
qq_52265298的博客
11-22 8836
在 nginx-1.12.1\conf 路径下，打开nginx.conf文件，将监听的端口80 修改为 8080，重新启动Nginx。接下来返回任务管理器，就可以看见两个nginx.exe进程，表示Nginx成功启动了，接下来就可以运行Nginx服务了。首先，我们要先找到Nginx启动失败的原因，然后根据原因寻找Nginx启动不起来的方法。注意：如若占用80端口的服务/程序不能关闭，则可以通过更改Nginx监听的端口号。4、接下来再查一下80端口使用情况，就发现80端口没有被占用了。
Vue项目打包到服务器后请求接口报错404
热门推荐
speano的博客
05-22 1万+
解决Vue项目打包到服务器后请求接口报错404问题。
vue项目打包部署到服务器上后页面404问题
qq_45963071的博客
11-24 1万+
当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网。我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决。
vue3 + vite2 打包部署后 404 解决方案
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
03-24 1万+
vue3 + vite2 打包部署后 404 解决方案 404现象解析 如果在开发环境没问题，但是部署后（部署到服务器的非根目录的情况时）出现很多相关的js，css文件报404，那么可以看一下index.html中的资源引用，如果都是/assets开头，那么这个时候就需要修改配置文件，重新打包了。 解决办法 在vue2中我们在config/index.js文件中配置了 assetsPublicPath:’./’，同理，vue3中也需要配置这个属性，vue3中vite生成的项目，没有config文件夹，
vue项目nginx部署刷新报错404
qq_40096322的博客
09-30 2943
当vue项目打包后,放在nginx内的html文件夹,启动部署后,访问刷新报错404,再次访问就又好了的问题,做出如下两种方式解决。1.修改vue项目的路由router配置文件的模式,将history改为hash即可。2.修改nginx的配置文件nginx.conf,添加如下配置,重启nginx即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值