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

Question

前端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/;  
            
        }

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

Answer 1

该回答通过自己思路及引用到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语句。

---

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