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

本文主要解决某视频剪辑软件项目使用历史模式发布到服务器Nginx上刷新页面404问题。(由于每个项目的情况都不尽相同，本方案已经完美解决本在所使用项目，具体情况可能还需要修改。)

1.项目背景分析

本人是爪哇后台开发，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-scale=no ' link rel='快捷图标type=' image/x-icon ' href='徽标。png“link rel=”快捷图标href='徽标。png '/head dy div id=' app '/div脚本类型=' text/JavaScript ' src=' http 3360 manifest。js？89b 5083667173048 a 500 '/脚本脚本类型=' text/JavaScript ' src=' http :厂商。js？9ea e 337435 ee 1b 63 d5cd'脚本脚本类型=' text/JavaScript ' src=' http : index。js？38915745 c7ed 8b 9143 db /脚本/正文/html1 .在之前百度的时候看到了一个信息，就是引入射流研究…文件使用可控硅整流器(可控硅整流器)的时候，如果前面带/是绝对路径，在思考是不是这个问题。

2.百度的时候大部分信息都是说修改Nginx配置文件。

2.问题解决

既然大致思路都有了，那么就开始尝试去解决一下。

2.1 更改某视频剪辑软件打包配置文件

修改webpack.config.js文件，这个是脚手架打包文件配置，使其打包后让index.html文件引用路径为绝对路径webpack.config.js。内容如下（每个项目打包配置均不同，这个配置仅仅是我使用的项目):

const resolve=require(路径).resolve const web pack=require(' web pack ')const HTMl web pack kkplugin=require(' HTMl-web pack-plugin ')const URL=require(' URL ')const public path='/'模块。导出=(选项={ })=({条目： {供应商： })./src/供应商，索引：/src/main.js' }，输出： { path : resolve(_ dirname，' dist ')，filename: options.dev？[姓名]。js ' : '[名称]。js？[chunkhash]'，chunkFilename: '[id].js？[chunkhash]'，publicPath: options.dev？/assets/' : publicPath }，模块： {规则s 3360 [{ test :/\ .vue$/，use: ['vue-loader'] }，{ test: /\ .js$/，use: ['babel-loader']，exclude: /node_modules/}，{ test: /\ .css$/，use: ['style-loader '，' css-loader '，' postcss-loader'] }，{ test: /\ .(png | jpg | JPEG | gif | eot | TTF | woff | woff 2 | SVG | svgz)(\？)?$/，使用：[{ loader : ' URL-loader '，选项： { limit 3360 10000 } }]}]}，插件：[新web pack。优化。commonschunk插件({ name :[' vendor '，' manifest'] })，新的html web pack kplugin({ template : ' src/index。html '、favicon: 'src/logo.png' })、resolvejs '、' .呜呜呜.json '，' .css'] }，devserver : { host : ' 127。0 .0 .1 '，端口： 8010，代理： { '/API/' : {目标3360 ' http://127。0 .1:8080 '，changeorigin: true，路径重写： { '^/api': ' ' } }，historyapifallback :/assets/' : public path).pathname } }，devtool: options.dev？# eval-source-map ' : ' # source-map ' })再次打包后，查看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-scale=no ' link rel='快捷图标type=' image/x-icon ' href='徽标。png“link rel=”快捷图标href='/徽标。png '/head body div id=' app '/div脚本类型=' text/JavaScript ' src=' http 3360/manifest。js？f7d 4b 2121 BC 37 e 262877 '/脚本脚本类型=' text/JavaScript ' src=' http :/vendor。js？9ea e 337435 ee 1b 63 d5cd'脚本脚本类型=' text/JavaScript ' src=' http :/index。js？' 51954197166 DD 938 b54e '/脚本/正文/html从index.html可以看出已经变成了绝对路径。

2.2 修改Nginx配置

修改nginx.conf配置文件，代码如下：

worker _ processes 1；事件{ worker _ connections 1024 } http { include mime . typesdefault _ type应用程序/八位字节流；sendfile onkeepalive _ timeout 65服务器{听80server _ name localhost##指向某视频剪辑软件打包后文件位置root/opt/nginx/dist/；## 拦截根请求，例如http://localhost位置/{ try _ files $ uri $ uri//index。html} ## 拦截带有TMS-监视器的请求，例如http://本地主机/TMS-监视器/管理员位置^~/tms-monitor{如果(！-e $ request _ filename){ 0重写^/(.*) /index.html最后；打破；} } # error _ page 500 502 503 504/50x。html位置=/50x.html {根html} }}3。总结

上述配置完成后，打包某视频剪辑软件项目，重启Nginx再次刷新就不会在有404的现象了。(再次申明：以上只是针对本人所在的项目，不一定使用所有情况。)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。