vue小笔记打包之后，刷新页面出现404的问题

最新推荐文章于 2024-10-13 14:25:33 发布

webmxj

最新推荐文章于 2024-10-13 14:25:33 发布

阅读量3k

点赞数

分类专栏： js vue.js

本文链接：https://blog.youkuaiyun.com/div_ma/article/details/78406559

版权

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

vue.js

6 篇文章

订阅专栏

本文介绍如何为Vue.js应用配置路由的历史模式，包括Apache和nginx服务器的设置方法，确保前端路由能在不同服务器环境下正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网解决方案

https://router.vuejs.org/zh-cn/essentials/history-mode.html

需要在后端进行配置

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

webmxj

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

已解决：vue部署刷新404，history路由打包刷新404

weixin_61032008的博客

03-19

743

在使用Vue.js开发后台管理系统时，尤其是使用若依框架进行开发后，部署到服务器上可能会遇到一个常见的问题：刷新页面时出现404错误。这个问题通常是由于使用了Vue Router的history模式，而服务器没有正确配置导致的。本文将详细介绍如何通过配置Vue项目和Nginx来解决这个问题。

【学习笔记之vue】vue项目放在springboot项目里后，刷新页面会显示whitelabel error page

IsQiya Bug Worlde

04-22

1171

当你在Spring Boot项目中嵌入Vue项目，并且刷新页面时遇到了“Whitelabel Error Page”，这通常意味着Spring Boot后端没有正确地处理前端路由的请求。Vue.js是一个前端框架，它使用客户端路由，而Spring Boot是一个后端框架，它通常处理服务器端的路由。通过检查上述方面并进行适当的调整，你应该能够解决在Spring Boot项目中嵌入Vue项目时遇到的“Whitelabel Error Page”问题。

参与评论您还未登录，请先登录后发表或查看评论

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项目，页面刷新就404了

一个UI、前端爱好者。

08-12

3967

history模式：需要在服务器端配置，确保所有路由都重定向到index.html。hash模式：更简单，不需要服务器端配置，但 URL 中会有。根据你的项目需求和服务器环境选择合适的解决方案。

vue项目部署后刷新页面404的原因和解决方案

热门推荐

为技术而生

03-11

1万+

vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面。扩展：当项目部署到服务器子文件路径时资源404问题。

vue项目打包成dist文件夹之后后端请求报404错误解决方法

qq_52126119的博客

11-17

7236

背景：前端Vue项目打包后部署在服务器上，而后端接口在另外一台服务器。本地生产环境运行时因为在Vue中配置了proxy代理，所以项目运行正常。找了好多方法，并进行了归纳，本文仅提供思路，方便自己以后遇见同样问题有思路，文章会不断完善，若未能解决问题，请见谅！整理了几个博主写的比较清晰的解决方法。

Vue打包到上架，遇到的一系列问题，打包路径404和静态资源文件图片找不到，的解决方案，如果对你有帮助，请点赞，评论告诉我，非常高高兴，可以帮助到你！！

weixin_43825473的博客

06-04

389

Vue打包到上架需求问题分析打包路径错误bootstrap缺少jquery 需求做一个Web简历，需要在外网进行展示。使用技术 Vue+Bootstrap 展示服务器Gitee Pages 问题分析打包路径错误 Gitee展示路径是https://账户名.gitee.io/项目名 Vue测试环境是账户名:8080/ 于是就倒是一个问题，在打包后 webpack打包的css和Js路径都是基于根目录的，在上传到展示服务器后会导致404路径错误其实文件是在项目名/的根目录，不是展示服务器的根目录所以需

Vue技术栈实现的云笔记项目，印象笔记的功能基本都实现.zip

10-21

- Vue Router用于管理应用的路由，实现页面的无刷新跳转。在这个项目中，可能有如笔记列表页、笔记详情页、编辑页等不同的路由配置。 4. **API接口通信** - 云笔记应用需要与服务器交互，获取或存储笔记数据。...

一个基于 vue、datav、Echart 框架的数据大屏项目，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换

03-02

一个基于 vue、datav、Echart 框架的 " 数据大屏项目 "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。项目需要全屏展示...

Vue学习笔记

最新发布

Python_Ghost的博客

10-13

1153

渐进式：逐渐进步，想用什么就用什么，不用全部都用vue从基础开始学习，循序渐进向前学习声明式渲染—组件系统—路由—vuex库：封装的属性和方法(jquery)框架：拥有自己的规则和元素，比库强大的多(vue.js)转换格式，过滤器就是一个函数传入值返回处理后的值过滤器只能用在插值表达式和v-bind表达式字母转大写：输入 hello 输出 ‘HELLO’字符串翻转输入’hello world’ 输出 ’dlrow olleh‘时间戳转换为时间日期格式。

vue学习笔记（超详细）

jiey0407的博客

03-09

6038

文章目录一. Vue基础认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed 计算属性setter和getter computed / meth

解决vue打包项目后刷新404的问题

11-26

vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue build 打包后刷新页面404

wd1073351726的博客

08-07

265

Apache RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] Nginx location / { try_files $uri $uri/ /index.html; } node.js const

vue项目线上页面刷新报404 解决方法

zhaofuqiangmycomm的博客

02-01

2515

打包后的dist下只有一个 index.html 文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转

Vue 解决刷新404问题

Yohann丶blog

09-16

605

1931600225486_.pic.jpg 环境 laradock @vue/cli 4.5.4 问题启动 vue 项目 $ yarn serve 2020-09-16_5f6177d2a45f7.png 访问 2020-09-16_5f617f4f36082.png 首次访问 http://localhost:8080/admin-dev/ ，正常...

Vue build打包之后，刷新页面出现404解决方案

weixin_37986763的博客

11-22

739

iis有用，其他没试 https://blog.youkuaiyun.com/meimeieee/article/details/87886789

vue-cli/webpack打包后上线出现路径错误404问题

小小前端

12-20

1253

文章目录问题：原因：解决办法：如果打包报错：问题：将打包好的项目部署到服务器，发现报错说图片找不到。态资源如js访问不到原因：这个是因为webpack打包的时候引入js时使用的是绝对路径导致的，修改webpack打包文件中的配置解决办法：在项目中添加vue.config.js文件，内容如下： module.exports = { baseUrl: process.env.N...

vue刷新报404问题解决

qq_36957411的博客

07-20

1086

nginx配置： server { listen 80; # 监听端口 server_name admin.shop.foolishcat.cn; # 站点域名 root /usr/local/nginx/www/admin_shop_foolishcat_cn; # 站点根目录 index index.html; location / { try_file

vue 打包项目放到线上刷新出现404的情况解决方案

Myzhuo的博客

11-04

1344

location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; }

Vue样本笔记项目快速构建指南

资源摘要信息:"neweasynote:Vue样本笔记项目" 新易笔记是使用Vue.js框架开发的一个简单易用的笔记应用项目。该项目利用Vue-Cli快速搭建了一个Vue.js环境，使得开发者能够专注于前端开发而无需担心配置繁琐。Vue.js...

vue小笔记 打包之后，刷新页面出现404的问题

Apache

nginx

vue小笔记打包之后，刷新页面出现404的问题