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在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
js实现产品缩略图效果
Mar 10 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
QML实现圆环颜色选择器
Sep 25 Javascript
js实现双色球效果
Aug 02 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
js的写法基础分析
2011/01/17 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
javascript连续赋值问题
2015/07/08 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python 实现单例模式的5种方法
2020/09/23 Python
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
农救科工作职责
2013/11/27 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
服务质量承诺书
2014/03/27 职场文书
建筑施工安全责任书
2014/07/24 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
大学生求职意向书
2015/05/11 职场文书
新郎新娘致辞
2015/07/31 职场文书
田径运动会广播稿
2015/08/19 职场文书