vue的history模式nginx配置

2022-08-17  本文已影响0人  依风听雨锋

当上下文不是根目录的时候,比如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被浏览器加载之后,前端路由就会工作,将用户需要的资源加载出来。

上一篇下一篇

猜你喜欢

热点阅读