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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
angular分页指令操作
2017/01/09 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
JavaScript链式调用实例浅析
2018/12/19 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python 统计代码行数简单实例
2017/05/04 Python
Python之str操作方法(详解)
2017/06/19 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
使用python实现飞机大战游戏
2020/03/23 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
学生感冒英文请假条
2014/02/04 职场文书
报告会主持词
2014/04/02 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
个人授权委托书样本
2014/09/13 职场文书
五四青年节活动总结
2015/02/10 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书