vue3 vite 无法直接只用fs

您是正确的，Vue3和Vite都是在浏览器环境下运行的，而浏览器不允许直接访问文件系统。因此，您无法直接使用Node.js的fs模块来读取本地文件夹中的SVG文件名。

不过，您可以尝试使用一些第三方的库，例如`fs-extra`、`klaw-sync`或`glob`等，这些库可以在浏览器中使用，帮助您读取本地文件系统中的文件名。您可以通过`npm`来安装这些库，例如：

npm install fs-extra --save-dev

然后在您的代码中使用这些库来读取SVG文件名，例如：

import fse from 'fs-extra';

const files = fse.readdirSync('./path/to/svg/folder');
const svgFileNames = files.filter(file => file.endsWith('.svg'))
    .map(file => file.replace('.svg', ''));

这里我们使用了`fs-extra`库的`readdirSync`方法来读取指定目录下的所有文件名，并使用`filter`和`map`方法来过滤和处理SVG文件名。

相关问题

vue3 cli 和vue3 vite 区别

Vue3 CLI 和 Vue3 Vite 都是用于 Vue3 项目开发的工具，但有一些区别。

Vue3 CLI 是官方提供的构建 Vue3 项目的脚手架工具，提供了一些常用的功能和插件，如 Vue Router、Vuex、TypeScript 等。Vue3 CLI 使用 Webpack 作为打包工具，可以自定义配置文件，支持更多的功能扩展，例如代码分割、动态导入等。

Vue3 Vite 是一个新的构建工具，它采用了 ES Modules 的方式进行模块化管理，并且使用了 Rollup 作为打包工具，可以实现更快的开发、构建和热更新。Vite 支持 Vue3 的新特性，如 Composition API、TypeScript 等，同时也支持在开发过程中使用 Vue2。

总的来说，Vue3 CLI 更适合大型项目，可以提供更多的功能和扩展性，而 Vue3 Vite 更适合快速原型开发或小型项目，可以提供更快的开发和构建速度。

安装vue3 vite

安装 Vue 3 Vite 可以按照以下步骤进行。

首先，使用 nvm 安装 Node.js 的多个版本，以便在不同的项目中切换使用。可以使用以下命令安装 Node.js v12.22.12 和 v18.16.0：

nvm install v12.22.12
nvm install v18.16.0

然后，使用 nvm 切换到 Node.js v18.16.0 版本：

nvm use v18.16.0

接下来，根据官方文档初始化最新版本的 Vue 3。根据引用中的内容，可以使用以下命令初始化 Vue 3 项目：

npm run dev

在执行上述命令后，Vue 3 的开发服务器将在本地启动，并提供一个网址，比如 `http://localhost:5173/`。你可以在浏览器中访问该网址来查看 Vue 3 应用的运行状态。

这样，你就成功地安装了 Vue 3 Vite 并在本地搭建了一个 Vue 单页应用。你可以使用基于 Vite 的构建设置，并可以使用 Vue 的单文件组件(SFC)进行开发。