本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改。)

1.项目背景分析

本人是Java后台开发,Vue其实使用也没有多久,只能说简单了解。发现问题的时候其实也一头雾水,第一思想就是百度看别人的思路。

1.1 查看项目打包后文件

首先看看项目打包后文件内容,看看有没有什么能突破的地方。文件目录如下:

打眼一看可以发现,主要的可能就是这个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的现象了。(再次申明:以上只是针对本人所在的项目,不一定使用所有情况。)

Vue项目History模式404问题解决的更多相关文章

  1. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  2. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  3. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  4. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

  5. vue项目history模式下微信分享相关问题

    import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...

  6. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

  7. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  8. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  9. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

随机推荐

  1. vue.js的计算机属性学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. VMware安装windows10系统

  3. thymleaf模板截取日期的年月日,去掉时分秒

    简单描述:浏览同事提交的代码,发现他的日期回显中有一行代码,只截取到了年月日,记录一下 代码: //HTML代码 <span th:text="${#strings.substring ...

  4. 右键菜单添加打开CMD选项

    转载: https://www.cnblogs.com/mkdd/p/8649139.html#undefined 目前用的win7sp1系统,平时打开CMD窗口通常用三种方法:1.win+R然后输入 ...

  5. CTPN项目部分代码学习

    上次拜读了CTPN论文,趁热打铁,今天就从网上找到CTPN 的tensorflow代码实现一下,这里放出大佬的github项目地址:https://github.com/eragonruan/text ...

  6. gotty---用来作为k8s的web terminal,通过参数读取指定pod的日志输出

    不要重复造轮子,我觉得这个方案比较适合现在的情况. 我们知道,如果手工查看k8s里指定pod的日志输出,一般的方案如下: kubectl logs -f -n [namespace] [pod] -c ...

  7. C# 多线程下 静态类字段异常

  8. Bootstraptable源码

    // @author 文志新 http://jsfiddle.net/wenyi/47nz7ez9/3/ /**关于插件的通用构造 * * 构造函数PluginName($trigger,option ...

  9. [SDOI2018]原题识别

    题解: ..感觉挺烦得 而且我都没有注意到树随机这件事情.. 就写个30分的莫队.. #include <bits/stdc++.h> using namespace std; #defi ...

  10. JMeter命令行监控CPU和内存资源

    首先确定Agent启动成功 客户端