在web页面显示服务器的指定文件夹

autoindex on

你可以使用Nginx来只显示指定的目录。你需要在nginx.conf文件中添加以下行来指定要显示的目录：

location /abc {
    autoindex on;
}

然后，当你访问包含/abc文件夹的URL时，你将看到一个包含文件和子文件夹的列表。

如果你的Nginx服务器的IP地址是192.168.1.100，那么/abc目录的URL将是：

http://192.168.1.100/abc/

请注意，这取决于你的Nginx服务器的配置。如果你使用了不同的端口或虚拟主机，URL可能会有所不同。

用VUE3实现上述功能

前端代码如下（vue3）：

// Vue3代码
<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file">{{ file }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
    };
  },
  mounted() {
    axios.get('/api/files').then((response) => {
      this.files = response.data;
    });
  },
};
</script>

后端代码如下（文件名：server.js）：

// Express代码
const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

app.get('/api/files', (req, res) => {
  const dirPath = '/path/to/abc';
  const files = listFiles(dirPath);
  res.send(files);
});

function listFiles(dir) {
  const files = [];
  const list = fs.readdirSync(dir);
  list.forEach((file) => {
    file = path.join(dir, file);
    const stat = fs.statSync(file);
    if (stat && stat.isDirectory()) {
      files.push(...listFiles(file));
    } else {
      files.push(file);
    }
  });
  return files;
}

app.listen(3000, () => console.log('Server started on port 3000'));

后端代码可以通过下列命令运行：

node server.js