Electron+Vite+Vue3打包后怎样获取assets下的静态文件
时间: 2025-07-05 14:03:48 浏览: 19
### 获取打包后的 `assets` 文件夹中的静态文件
在使用 Electron、Vite 和 Vue3 构建的应用程序中,访问打包后的 `assets` 文件夹中的静态资源可以通过配置和特定路径处理来实现。
#### 使用公共目录放置静态资产
为了方便地引用静态资源,在开发阶段可以将这些资源放在项目的 `public` 目录下。当构建项目时,位于该位置下的所有文件都会被复制到最终的输出目录,并保持原有的结构不变[^2]。
对于通过 Vite 进行打包的情况,默认情况下会有一个 `/dist` 输出路径用于存放生产环境版本的内容。如果希望自定义这个行为或者指定其他地方作为公共资源的位置,则可以在 vite.config.js 中调整相关选项:
```javascript
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: './index.html', // 主入口HTML文件
output: {
assetFileNames: 'assets/[name].[ext]' // 设置asset文件名模式
}
},
outDir: 'build' // 修改默认输出目录为 "build"
}
})
```
#### 动态加载本地文件
一旦应用被打包成可执行文件,想要读取或写入本地磁盘上的数据就需要借助于 Node.js API 或者更推荐的方式是利用 Electron 提供的安全方法来进行操作。例如,要打开一个对话框让用户选择图片或其他类型的文件,可以这样做:
```javascript
const { dialog } = require('electron');
async function openImage() {
const result = await dialog.showOpenDialog({ properties: ['openFile'] });
if (!result.canceled && result.filePaths.length >= 1) {
console.log(result.filePaths[0]);
}
}
```
另外一种情况是从已知路径直接获取某个具体文件的信息,这时应该采用 fs 模块提供的同步/异步函数去完成任务;但是请注意,在现代浏览器环境中出于安全考虑不允许直接访问用户的文件系统,因此这部分逻辑应当放到主进程中执行而不是渲染进程里。
最后值得注意的是,由于 Webpack/Vite 等工具会在编译期间处理静态资源链接转换工作,所以在模板字符串内可以直接按照相对 URL 的方式书写即可正常解析指向目标资源。
阅读全文
相关推荐



















