在Vue项目部署到docker的Nginx上如何设置这个基础基础路径

在将 Vue 项目部署到 Docker 容器中，并通过 Nginx 进行访问时，也可以通过设置基础路径来实现相对路径的请求，可以按照以下步骤进行配置：

1. 在 Vue 项目的根目录下创建一个 `vue.config.js` 文件，并添加以下内容：

   module.exports = {
     publicPath: '/my-app/'
   }

其中，`publicPath` 表示 Vue 项目的基础路径，可以根据需要进行自定义配置。

2. 在 Nginx 的配置文件中添加以下内容：

   server {
       listen 80;
       server_name example.com;
   
       location /my-app/ {
           root /usr/share/nginx/html;
           index index.html;
           try_files $uri $uri/ /my-app/index.html;
       }
   }

其中，`location /my-app/` 表示访问路径的前缀，需要与 `vue.config.js` 中设置的 `publicPath` 值保持一致。`root` 表示 Vue 项目的打包文件所在的目录，这里默认为 `/usr/share/nginx/html`，如果实际情况不同，需要进行相应的调整。

3. 将 Vue 项目打包，并将打包后的文件复制到 Nginx 的默认目录 `/usr/share/nginx/html` 中。

假设你已经通过 `npm run build` 命令将 Vue 项目打包，并将打包后的文件保存在 `dist` 目录中，可以使用以下命令将打包后的文件复制到 Nginx 的默认目录：

   docker cp dist/. <nginx-container-name>:/usr/share/nginx/html/my-app

其中，`<nginx-container-name>` 表示 Nginx 容器的名称，可以通过 `docker ps` 命令查看。

4. 重启 Nginx 容器，使配置生效。

   docker restart <nginx-container-name>

这样，当用户访问 `http://example.com/my-app` 时，Nginx 将自动加载 Vue 项目，并将所有请求路径添加上 `/my-app` 前缀，从而实现了基础路径的配置。