Vue项目History模式404问题解决方法

网络编程 2025/1/7 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。（由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。）

1.项目背景分析

本人是Java后台开发，Vue其实使用也没有多久，只能说简单了解。发现问题的时候其实也一头雾水，第一思想就是百度看别人的思路。

1.1 查看项目打包后文件

首先看看项目打包后文件内容，看看有没有什么能突破的地方。文件目录如下：

打眼一看可以发现，主要的可能就是这个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <title>系统管理</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="shortcut icon" type="image/x-icon" href="logo.png">
<link rel="shortcut icon" href="logo.png"></head>

<body>
 <div id="app"></div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/manifest.js">

1.在之前百度的时候看到了一个信息，就是引入js文件使用scr的时候，如果前面带/是绝对路径，在思考是不是这个问题。
2.百度的时候大部分信息都是说修改Nginx配置文件。
2.问题解决
既然大致思路都有了，那么就开始尝试去解决一下。
2.1 更改Vue打包配置文件
修改webpack.config.js文件，这个是Vue-cli打包文件配置，使其打包后让index.html文件引用路径为绝对路径。webpack.config.js内容如下（每个项目打包配置均不同，这个配置仅仅是我使用的项目）：


const resolve = require('path').resolve
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
const publicPath = '/'

module.exports = (options = {}) => ({
 entry: {
  vendor: './src/vendor',
  index: './src/main.js'
 },
 output: {
  path: resolve(__dirname, 'dist'),
  filename: options.dev "htmlcode">

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <title>系统管理</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="shortcut icon" type="image/x-icon" href="logo.png">
<link rel="shortcut icon" href="/logo.png"></head>

<body>
 <div id="app"></div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/manifest.js">

从index.html可以看出已经变成了绝对路径。
2.2 修改Nginx配置
修改nginx.conf配置文件，代码如下：


worker_processes 1;

events {
  worker_connections 1024;
}

http {
  include    mime.types;
  default_type application/octet-stream;

  sendfile    on;

  keepalive_timeout 65;

  server {
   listen    80;
   server_name localhost;
   ## 指向vue打包后文件位置
   root /opt/nginx/dist/;

   ## 拦截根请求，例如http://localhost
   location / {
      try_files $uri $uri/ /index.html;
   }

   ## 拦截带有tms-monitor的请求，例如http://localhost/tms-monitor/admin
   location ^~/tms-monitor{
      if (!-e $request_filename) {
             rewrite ^/(.*) /index.html last;
             break;
      }
   }

   #error_page  500 502 503 504 /50x.html;
   location = /50x.html {
     root  html;
   }

  }
}


3.总结
上述配置完成后，打包Vue项目，重启Nginx再次刷新就不会在有404的现象了。（再次申明：以上只是针对本人所在的项目，不一定使用所有情况。）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    Vue,History模式404,Vue,History,404 
                                
                                    标签：
                                        Vue,History模式404,Vue,History,404
                                     

                                蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“Vue项目History模式404问题解决方法”

暂无Vue项目History模式404问题解决方法的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年01月07日

Vue项目History模式404问题解决方法

Vue,History模式404,Vue,History,404

Vue中使用方法、计算属性或观察者的方法实例详解

vue.js 实现v-model与{{}}指令方法

评论“Vue项目History模式404问题解决方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接