vue build 后文件夹丢失

vue build 命令是用来将 Vue 项目编译打包生成静态文件的指令。在执行该命令后，会将项目中的源代码经过一系列的处理、压缩和打包，生成一个 dist 文件夹，其中包含了编译后的静态文件（如 HTML、CSS、JavaScript 等）。

如果在执行 vue build 命令后发现文件夹丢失了，可能是由于以下几个原因：

1. 编译过程出错：编译过程中可能发生了错误，导致生成的静态文件没有成功输出到 dist 文件夹中。这可能是由于代码错误、配置问题或依赖缺失等引起的。你可以查看终端输出的错误信息来确定具体原因，然后根据错误信息来修复问题。

2. 路径配置错误：如果你在项目的配置文件中修改了输出路径（output）的配置，可能会导致生成的静态文件输出到其他文件夹中，而不是 dist 文件夹中。你可以检查一下配置文件中的路径配置，确保输出路径正确。

3. 之前生成的 dist 文件夹被删除：如果你之前手动删除了 dist 文件夹，那么在执行 vue build 命令后，会重新生成一个新的 dist 文件夹，旧的文件夹就会丢失。这种情况下，你可以通过还原或重新生成 dist 文件夹来解决丢失问题。

总之，当使用 vue build 命令后发现文件夹丢失时，需要仔细检查编译过程中的错误信息和路径配置，确保没有配置错误或依赖缺失。如果是之前生成的 dist 文件夹被删除，可以还原或重新生成该文件夹。

相关问题

> visual-drag-demo@0.1.0 build > vue-cli-service build 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

### 解决 `vue-cli-service` 命令未找到问题

当遇到 `'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件` 错误时，通常是由于 Vue CLI 没有正确安装或配置在项目中[^2]。

#### 验证 Node.js 和 NPM 安装
确保Node.js和NPM已经正确安装。可以通过在命令行工具中输入以下命令验证：

node -v
npm -v

如果上述命令返回相应的版本号，则说明Node.js和NPM已正确安装[^1]。

#### 清理并重建 node_modules 文件夹
有时项目的依赖项可能损坏或丢失，清理现有的 `node_modules` 并重新构建可以帮助解决问题:

1. 删除 `node_modules` 文件夹以及 `package-lock.json`(如果有)[^5]:

   rm -rf node_modules package-lock.json

2. 重新安装所有的依赖包

   npm install

完成这些操作之后应该会有一个全新的 `node_modules` 文件夹，并且其中包含了所有必需的模块，包括 `@vue/cli-service` 插件[^4]。

#### 确认 @vue/cli-service 已经被安装
打开项目的 `package.json` 文件确认是否存在 `"devDependencies"` 中包含 `@vue/cli-service` 。如果没有的话，可以手动添加它通过执行下面这条命令来全局或者本地安装这个服务端口：

对于本地安装（推荐做法），只需简单地再次运行 `npm install` 即可自动获取所需的开发依赖；如果是首次初始化项目，那么应当先克隆仓库后再做此步骤[^3]。

#### 设置 PATH 环境变量 (仅限于特定情况)
大多数情况下不需要特别调整环境变量，因为 `npx` 或者直接调用位于 `./node_modules/.bin/` 下面的二进制文件都可以正常工作。但是如果你确实遇到了路径方面的问题，考虑把 `%USERPROFILE%\AppData\Roaming\npm` 添加到 Windows 用户级别的 Path 变量里面去。

经过以上措施后尝试重新启动终端窗口再试一次 `vue-cli-service build` 应该能够顺利解决了。

vite 打包vue，style 中的背景图丢失了

Vite 是一个现代的前端构建工具，它采用了预渲染、SSR (服务器端渲染) 和高效的文件系统监听等技术，能快速地构建Vue应用。然而，在打包过程中，如果Vue项目中的CSS样式包含背景图片路径，可能会遇到问题，特别是当图片位于相对路径下时。

在Vite中，由于其默认配置是静态资产分离，这意味着静态资源（如图片）不会直接被打包到dist目录下，而是会被复制到一个单独的public文件夹。如果你的背景图片引用的是相对路径，并且指向的是dist公共文件夹之外的路径，打包后访问到的图片就可能找不到，导致显示为空白或者404错误。

解决这个问题通常需要做以下操作：

1. **修改图片路径**：将图片移到public文件夹内，或者使用绝对路径（例如`/images/myimage.png`），让Vite能够识别并正确打包。

2. **配置alias**：在vite.config.js中设置全局的url alias，告诉Vite如何映射特定的路径。例如：

   build: {
     assetsDir: 'static',
     rollupOptions: {
       input: 'src/main.ts',
       output: {
         assetFileNames: 'assets/[name].[hash]./[ext]',
         dir: './'
       },
       external: ['vue', 'axios'],
       resolve: {
         alias: {
           '@': resolve('src'),
           images: resolve('src/assets/images') // 映射images路径
         }
       }
     }
   }

3. **使用插件处理**：可以使用像`@vitejs/plugin-vue-router-assets-paths`这样的插件来帮助处理Vue路由下的静态资源路径。