本文主要解决Vue项目使用历史模式发布到服务器Nginx上刷新页面404问题。(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改。)
<强> 1。项目背景分析
本人是Java后台开发,Vue其实使用也没有多久,只能说简单了解。发现问题的时候其实也一头雾水,第一思想就是百度看别人的思路。
<强> 1.1查看项目打包后文件
首先看看项目打包后文件内容,看看有没有什么能突破的地方。文件目录如下:
<人物> 
打眼一看可以发现,主要的可能就是这个index . html文件,内容如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>系统管理& lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1,user-scalable=不”比;
& lt;链接rel="快捷方式图标" type="形象/x图标" href=" https://www.yisu.com/zixun/logo.png "比;
& lt;链接rel="快捷方式图标" href=" https://www.yisu.com/zixun/logo.png "祝辞& lt;/head>
& lt; body>
& lt; div id="应用"祝辞& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/manifest.js?89b5083667173048a500 "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vendor.js?9eae337435ee1b63d5cd "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/index.js?38915745c7ed8b9143db "祝辞& lt;/script>
& lt;/body>
& lt;/html>
1。在之前百度的时候看到了一个信息,就是引入js文件使用可控硅的时候,如果前面带/是绝对路径,在思考是不是这个问题。
2。百度的时候大部分信息都是说修改Nginx配置文件。
<强> 2。问题解决
既然大致思路都有了,那么就开始尝试去解决一下。
<强> 2.1更改Vue打包配置文件
修改webpack.config.js文件,这个是Vue-cli打包文件配置,使其打包后让index . html文件引用路径为绝对路径.webpack.config.js内容如下(每个项目打包配置均不同,这个配置仅仅是我使用的项目):
const解决=需要.resolve(“路径”)
const webpack=要求(“webpack”)
const HtmlWebpackPlugin=要求(“html-webpack-plugin”)
const url=要求(url)
const publicPath='/'
模块。出口=(选项={})=比;({
条目:{
供应商:“。/src/供应商”,
指数:“/src/main.js。”
}，
输出:{
路径:解决(__dirname,“距离”),
文件名:options.dev & # 63;“[名字]。js ': '[名字]. js # 63; [chunkhash]”,
chunkFilename:“[id] . js # 63; [chunkhash]”,
publicPath: options.dev & # 63;“资产/?publicPath
}，
模块:{
规则:[{
测试:/\ .vue/美元,
使用(“vue-loader”):
}，
{
测试:/\ . js/美元,
用途:[' babel-loader '),
排除:/node_modules/}，
{
测试:/\ . css/美元,
用途:[‘style-loader’,‘css-loader’,‘postcss-loader’)
}，
{
测试:/\。(png | jpg | jpeg | gif |测试结束| ttf woff | | woff2 svg | | svgz)(\ & # 63;。+) & # 63;美元/,
用途:[{
装载机:“url-loader”,
选择:{
限制:10000
}
})
}
]
}，
插件:[
新webpack.optimize.CommonsChunkPlugin ({
名字:(“供应商”、“清单”)
}),
新HtmlWebpackPlugin ({
模板:“src/index . html”,
标识:“src/logo.png”
}）
]，
解决:{
别名:{
“~”:解决(__dirname“src”)
}，
扩展:['。js ', '。vue ', '。json ', ' . css)
}，
devServer: {
主持人:127.0.0.1,
端口:8010
代理:{
“/api/? {
目标:“http://127.0.0.1:8080”,
changeOrigin:没错,
pathRewrite: {
“^/api”:“
}
}
}，
historyApiFallback: {
指数:url.parse (options.dev & # 63;“资产/?.pathname publicPath)
}
}，
devtool: options.dev & # 63;“# eval-source-map”:“#源图”
})
再次打包后,查看index . html,内容如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>系统管理& lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1,user-scalable=不”比;
& lt;链接rel="快捷方式图标" type="形象/x图标" href=" https://www.yisu.com/zixun/logo.png "比;
& lt;链接rel="快捷方式图标" href=" https://www.yisu.com/logo.png "祝辞& lt;/head>
& lt; body>
& lt; div id="应用"祝辞& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/manifest.js?f7d4b2121bc37e262877 "祝辞& lt;/script> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/vendor.js?9eae337435ee1b63d5cd "祝辞& lt;/script> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/index.js?51954197166dd938b54e "祝辞& lt;/script> & lt;/body>
& lt;/html>
