接触vue已经好几年了，一直使用的是默认hash模式，曾经尝试用nginx配置history模式，但是一发布到自己的网站就404。辗转几次就作罢。
今天没事反看了下vue文档，看到express，遂想到了，既然有express，那么肯定有koa2的，果然找到了一个插件koa2-connect-history-api-fallback，按照教程尝试了一下，https://lanling.diumx.com 能打开。刷新，不错。
/* history模式 */
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
app.use(historyApiFallback({
/** 这里配置了api白名单，因为网站下的api是接口 */
whiteList: ['/api']
}))
app.use(...)
但是当我切换到https://lanling.diumx.com/task/checkin再次刷新页面，页面出现了空白，返回了404，震惊我了！！！
为什么！！！
不要慌，我打开控制台看了下，在获取资源的时候，路由/task/checkin指向了
Request URL: https://lanling.diumx.com/task/js/chunk-2fd36b68.7be22cca.js
Request Method: GET
所有的js，css，img文件都指向了task文件夹下
但是网站下是没有task文件夹的，这样肯定不对，我就尝试自己写一个中间件查看url，请求的url是
/task/js/chunk-2fd36b68.7be22cca.js
/task/img/chunk-4238dha.fasd1.png
/task/css/chunk-42fasd.312313nd.css
但是
/js/chunk-2fd36b68.7be22cca.js
/img/chunk-4238dha.fasd1.png
/css/chunk-42fasd.312313nd.css
才是正确的，所以我就做了一下转折
首先配置打包，把is/img/css静态资源打包到assets文件夹下
这里以vue-cli4为例，在vue.config.js增加配置
module.exports = {
...
assetsDir:'assets',
...
}
然后
在koa2的入口配置一个自定义中间件
/* history模式 */
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
/** 改写url开始 */
app.use(async (ctx, next) => {
let { method, query, body, url } = ctx.request
if(url.includes('/assets')) {
ctx.request.url = ctx.originalUrl = '/assets' + ctx.request.url.split('assets')[1]
}
await next()
})
/** 改写url结束 */
app.use(historyApiFallback({
/** 这里配置了api白名单，因为网站下的api是接口 */
whiteList: ['/api']
}))
app.use(...)
刷新，ok。
以上是我查阅了很多koa2-connect-history-api-fallback, koa-static, koa-router 配置没有找到相关方案，然后自己修改url的解决方案（无奈之举），如果您看到这篇文章，有更好的方案，麻烦告知一下，谢谢
2021年8月4号，时隔近两月，我又找到一种通过nginx配置的方式，其实如果再细分一下，是3种方式
方式一：nginx（最优）
server {
listen 80;
server_name mulan.diumx.com;
location / {
# 静态文件目录
root html/mulan/;
# 请求js，css，img等资源从网址根目录下
proxy_set_header Host $host;
# vue官方给的配置方式，其实单独配置下面这条，是不行的，还需要上面那条，注意两条位置别搞反了
try_files $uri $uri/ /index.html;
}
# 代理api
location /api/ {
proxy_pass http://127.0.0.1:8040;
}
}
方式二：nginx+打包添加base/publicPath
server {
listen 80;
server_name mulan.diumx.com;
location / {
# 静态文件目录
root html/mulan/;
# vue官方给的配置方式，其实单独配置下面这条，是不行的，还需要上面那条，注意两条位置别搞反了
try_files $uri $uri/ /index.html;
}
# 代理api
location /api/ {
proxy_pass http://127.0.0.1:8040;
}
}
// vue.config.js
module.exports = {
// vue-cli3里识别的是publicPath
publicPath: process.env.NODE_ENV === 'production' ? 'http://mulan.diumx.com/' : '/',
// 如果你使用的是vite，那么请把publicPath换成base即可
}
方式三：nginx+base href
server {
listen 80;
server_name mulan.diumx.com;
location / {
# 静态文件目录
root html/mulan/;
# vue官方给的配置方式，其实单独配置下面这条，是不行的，还需要上面那条，注意两条位置别搞反了
try_files $uri $uri/ /index.html;
}
# 代理api
location /api/ {
proxy_pass http://127.0.0.1:8040;
}
}
// index.html
// 在你的index.html中添加base href即可，href为你网址
<head>
<meta charset="UTF-8" />
<base href="http://mulan.diumx.com">
</head>
从上面可以看出，第一种最合适，第二种和第三种都是围绕着js/css/img文件前缀在做工作，二三如果还发布地址就要重新发版，不太好，所以还是要使用方式一，第二三只做了解吧。
2021年11月9日终极解决方案
location / {
root html/前端代码文件夹/;
# 关键部分
proxy_set_header Host $host;
try_files $uri $uri/ /index.html;
}
网友评论