步骤概览
1、配置 Nginx 静态文件夹
2、在 Vue.js 中配置图片路径
3、打包和部署前端文件

1. 配置 Nginx 静态文件夹

首先，确保Nginx配置文件 (nginx.conf) 设置正确，以便在 D:\nginx-1.21.6\html\dist\pdf\web\产品图片 目录中提供静态文件。

编辑你的 nginx.conf 文件，添加静态文件服务配置：

server {
    listen 80;
    server_name your_server_name;

    location / {
        root   D:/nginx-1.21.6/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /pdf/web/产品图片/ {
        alias D:/nginx-1.21.6/html/dist/pdf/web/产品图片/;
    }

    # 其他配置项...
}

这样，Nginx会将请求 /pdf/web/产品图片/ 映射到 D:/nginx-1.21.6/html/dist/pdf/web/产品图片/ 目录。

2. 在 Vue.js 中配置图片路径

在你的Vue.js代码中，使用静态路径来访问图片。在组件中，可以直接使用服务器上的相对路径。

假设你有一个 row.img 字段，它包含图片文件名，你可以这样构建图片路径：

<template>
  <div>
    <el-button @click="handlePreviewA(row)">预览图片</el-button>
    
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <img :src="dialogImageUrl" alt="预览图片" style="width: 100%;" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handlePreviewA(row) {
      if (row.img == null) {
        this.$message.error("暂无图片");
      } else {
        // 使用绝对路径访问Nginx服务器上的图片
        this.dialogImageUrl = `/pdf/web/产品图片/${row.img}`;//注意：这里的row.img要匹配服务器的图片命名
        this.dialogVisible = true;
      }
    }
  }
}
</script>

<style>
/* 添加你自己的样式 */
</style>

3. 打包和部署前端文件

运行以下命令来打包你的Vue.js项目：

npm run build

将打包生成的 dist 文件夹复制到 D:\nginx-1.21.6\html 目录下。

总结

通过在Nginx配置文件中设置静态文件路径，并在Vue.js组件中使用相对路径访问图片，你可以确保前端代码在打包后能够正确访问服务器上的图片文件夹。这样，即使图片文件夹不在本地开发环境中，打包后的前端代码也能正常工作。