nginx如何配置访问createWebHistory 模式的路由

前端vue 框架不带# nginx要如何配置

我的vue.config.js是这样写的

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath: "/", 
});

路由配置  

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

我的服务端是

location ^~  /vedio/{
    proxy_pass http://127.0.0.1:8085/vedio/;  
            
        }

我要如何配置才能正常访问到页面

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
如果您的Vue.js应用程序使用了createWebHistory模式的路由，那么在Nginx中配置访问路由时，需要配置一个fallback路由来将所有非静态资源的请求重定向到index.html。

以下是一个简单的Nginx配置示例，可以用于处理createWebHistory模式的路由：

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/your/vue/app;

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /vedio/ {
        proxy_pass http://127.0.0.1:8085/vedio/;
    }

    location ~* \.(gif|jpg|jpeg|png|svg|css|js|ico)$ {
        expires max;
        log_not_found off;
        access_log off;
    }
}

上面的配置假设您的Vue.js应用程序已经被构建，并且其静态资源已经被放置在了Nginx的根目录下。在配置中，我们使用了try_files $uri $uri/ /index.html语句来将所有非静态资源的请求重定向到index.html。同时，我们还配置了一个location /vedio/语句来处理/vedio/路径的请求，并将其代理到后端服务器上。

请注意，在使用createWebHistory模式的路由时，Nginx的配置需要针对所有可能的路由进行处理。如果您的Vue.js应用程序中有多个路由，您需要在Nginx中为每个路由配置相应的location语句。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

【以下回答由 GPT 生成】

问题解决方法如下：

可以通过在 Nginx 配置中添加一个 location 规则来使 createWebHistory 模式的路由可访问。以下是配置方法：

location / {
    try_files $uri $uri/ /index.html;
}

location ^~ /video/ {
    proxy_pass http://127.0.0.1:8085/video/;
}

上述配置中的第一个 location 规则用于处理前端页面的路由，将所有请求都重定向到 index.html，这样就可以保证 createWebHistory 模式的路由能够正确访问。

请注意，这段配置要放在其他 location 规则之前，以确保路由规则的顺序正确。

此外，为了保证该配置生效，需要重新加载 Nginx 配置文件或重启 Nginx 服务。

【相关推荐】

• 看下这篇博客，也许你就懂了，链接：nginx部署vue只能访问默认页面的问题
• 除此之外, 这篇博客: Linux安装nginx及部署vue项目中的 4、修改配置文件 部分也许能够解决你的问题。