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 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
vue路由跳转传参数的方法
May 06 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
ThinkPHP应用模式扩展详解
2014/07/16 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
phpinfo的知识点总结
2019/10/10 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python脚本后台执行方式
2019/12/21 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Java面试题及答案
2012/09/08 面试题
优秀信贷员先进事迹
2014/01/31 职场文书
手工社团活动方案
2014/02/17 职场文书
售后服务承诺书范文
2014/03/26 职场文书
设计大赛策划方案
2014/06/13 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2014年计生工作总结
2014/11/21 职场文书
文明单位申报材料
2014/12/23 职场文书
党员转正申请报告
2015/05/15 职场文书
转学证明范本
2015/06/19 职场文书