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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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如何将日志写进syslog
2013/06/28 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python函数嵌套实例
2014/09/23 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python 实现倒排索引的方法
2018/12/25 Python
更新修改后的Python模块方法
2019/03/03 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python 高阶函数简单介绍
2021/02/19 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
房地产活动策划方案
2014/05/14 职场文书
美国留学经济担保书
2014/05/20 职场文书
温馨提示标语
2014/06/26 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
爱的教育观后感
2015/06/17 职场文书
纪委立案决定书
2015/06/24 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书