前端build之后如何部署到nginx二级目录中，API 路径怎么修改？

smjkzsl commented 1 year ago

VITE_GLOB_API_URL=/api #这个修改好像并不起作用

VITE_APP_API_BASE_URL=http://localhost:3002/

swuecho commented 1 year ago

以上两个参数是关于, 后端请求的路径, 跟前端无关.

https://vitejs.dev/guide/build.html#public-base-path

chatgpt 答案

可以在 vite.config.js 中配置 base 字段来改变构建后的 base url。

假设要将构建后的应用部署在 http://www.example.com/my-app/ 目录下，则需要在 vite.config.js 中添加如下配置：

export default {
  // ...
  base: '/my-app/'
}

这样，在 npm run build 构建后生成的静态文件中，html 即会被注入为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite App</title>
    <link rel="icon" type="image/svg+xml" href="/my-app/favicon.svg" />
    <link rel="stylesheet" href="/my-app/assets/css/app.abc123.css" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/my-app/assets/js/app.abc123.js"></script>
  </body>
</html>

注意，base 字段配置的是相对于域名的路径，不需要加上 http://www.example.com。同时，在使用 vite dev 命令启动开发服务器时，也需要注意 base 字段的配置，否则会影响开发时路由的跳转。

export default {
  // ...
  base: '/my-app/',
  server: {
    // dev server 配置中要相同
    port: 8080,
    base: '/my-app/'
  }
}

这样，在启动开发服务器时，应用即会在 http://localhost:8080/my-app/ 访问。如果有使用路由，则可以在路由配置中添加 base 字段。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory('/my-app/'), // 添加 base 配置
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
});

这样，在使用路由导航时，即可正确地跳转到对应路径。

starmoon-1134 commented 1 year ago

按照你的提示，已经可以通过localhost:1002/my-app/ 的方式访问了，但是通过nginx反代之后就404了，nginx这么配置有问题吗（本人小白）

  location /my-app/ {   #chagpt路径
      proxy_redirect off;
      proxy_pass http://127.0.0.1:1002;  #chagpt监听端口
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;

}

starmoon-1134 commented 1 year ago

前端代理成功了，浏览器请求的时候，路径末尾少了/ 导致请求失败。也可以把vite.config.ts中base路径末尾的/去掉，即

export default {
  // ...
  base: '/my-app',
  server: {
    // dev server 配置中要相同
    port: 8080,
    base: '/my-app'
  }
}

修改前端环境变量 .env VITE_GLOB_API_URL=/my-app-backend/api 然后后端就404了，通过nginx替换路径解决，不知道是否还有更优雅的方式呢？

location /my-app-backend {
          rewrite ^/my-app-backend/(.*)$ /$1 break;
          proxy_set_header   X-Real-IP $remote_addr; #转发用户IP
      proxy_pass http://127.0.0.1:3002;
}

wongdean commented 1 year ago

修改成功了，写一下我的配置：

        location = /chat/ {
            alias   /var/www/html/wordpress/chat/;
            index  index.html index.htm;
        }
        location /api {
            proxy_set_header   X-Real-IP $remote_addr; #转发用户IP
            proxy_pass http://127.0.0.1:3002;
        }

然后，需要前端打包修改一个文件vite.config.ts，加一行（我加在了34行）

    base: '/chat/',

这样可以通过 域名/chat访问到了

Chanzhaoyu / chatgpt-web

前端build之后如何部署到nginx二级目录中，API 路径怎么修改？ #725