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 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
DISCUZ 分页代码
2007/01/02 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
js表格分页实现代码
2009/09/18 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python实现基本线性数据结构
2016/08/22 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
StubHub德国:购买和出售门票
2017/09/06 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
什么是GWT的Entry Point
2013/08/16 面试题
简历中求职的个人自我评价
2013/12/03 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android