vue的history模式nginx配置

当上下文不是根目录的时候，比如app。如下配置

路由配置

//路由对象
const router = createRouter({
    // history: createWebHashHistory(),
    history:createWebHistory('/app'),
    routes //上面的路由数组

})

配置打包时候，上下文
vite.config.js

export default defineConfig({
    base: 'app',
    ....
})

nginx配置

              location /app {
                        alias /home/zou/www/app;
                        index index.html index.htm;
                        try_files $uri $uri/ /app/index.html;
                }

最重要的是 try_files $uri $uri/ /app/index.html; 以http://www.example.com/post为例，$uri会匹配到post，nginx发现dist下面没有post这个文件，也没有post这个文件夹，所以最后会返回index.html。这样，index.html被浏览器加载之后，前端路由就会工作，将用户需要的资源加载出来。