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


Posted in Javascript onOctober 31, 2018

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

1.项目背景分析

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

1.1 查看项目打包后文件

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

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

打眼一看可以发现,主要的可能就是这个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="manifest.js?89b5083667173048a500"></script>
 <script type="text/javascript" src="vendor.js?9eae337435ee1b63d5cd"></script>
 <script type="text/javascript" src="index.js?38915745c7ed8b9143db"></script>
</body>

</html>

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 ? '[name].js' : '[name].js?[chunkhash]',
  chunkFilename: '[id].js?[chunkhash]',
  publicPath: options.dev ? '/assets/' : publicPath
 },
 module: {
  rules: [{
    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|woff2|svg|svgz)(\?.+)?$/,
    use: [{
     loader: 'url-loader',
     options: {
      limit: 10000
     }
    }]
   }
  ]
 },
 plugins: [
  new webpack.optimize.CommonsChunkPlugin({
   names: ['vendor', 'manifest']
  }),
  new HtmlWebpackPlugin({
   template: 'src/index.html',
   favicon: 'src/logo.png' 
  })
 ],
 resolve: {
  alias: {
   '~': resolve(__dirname, 'src')
  },
  extensions: ['.js', '.vue', '.json', '.css']
 },
 devServer: {
  host: '127.0.0.1',
  port: 8010,
  proxy: {
   '/api/': {
    target: 'http://127.0.0.1:8080',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  },
  historyApiFallback: {
   index: url.parse(options.dev ? '/assets/' : publicPath).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-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="/manifest.js?f7d4b2121bc37e262877"></script><script type="text/javascript" src="/vendor.js?9eae337435ee1b63d5cd"></script><script type="text/javascript" src="/index.js?51954197166dd938b54e"></script></body>

</html>

从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的现象了。(再次申明:以上只是针对本人所在的项目,不一定使用所有情况。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 #Javascript
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 #Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
vue通过style或者class改变样式的实例代码
Oct 30 #Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
银行存款证明样本
2014/01/17 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
医院见习总结
2015/06/24 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
如何利用Python实现一个论文降重工具
2021/07/09 Python