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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
vue和H5 draggable实现拖拽并替换效果
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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python Flask基础教程示例代码
2018/02/07 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
如何清空python的变量
2020/07/05 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
应届生人事助理求职信
2013/11/09 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
质检的岗位职责
2013/11/17 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
淘宝好评语句大全
2014/12/31 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS