electron-vue 讀取本地文件(windows下以nedb為例)

以下以nedb為例,說明electron-vue路徑指定方式以及如何讓nedb設定至全域,讓每個component可以直接使用。

nedb注入vue全域使用

首先建立nedb宣告的js檔,命名為database,放在assets目錄
(僅供範例,檔名、路徑隨各人喜好)

src/renderer/assets/database.js

1. 宣告nedb

為了可以直接使用async、await,直接採用打包好的promise版本

1
2
3
4
5
6
7
8
import Datastore from 'nedb-promise';
import path from 'path';
import { remote } from 'electron';

export default new Datastore({
filename: path.join(__dirname, "../../../TESTDB.db"),
autoload: true
});

2. 注入vue全域

打開src/renderer/main.js
在new Vue上方引入

1
2
import db from './assets/database'
Vue.db = Vue.prototype.$db = db

3. 其他vue檔直接操作方式

其他vue檔直接使用this.$db就可以操作db了!

1
2
3
4
async mounted(){
const vm = this;
let DBdata = await vm.$db.find({});
}

electron-vue 讀取本地文件

開發到尾聲,準備要發佈程式,就要調整路徑位置。
這裡可以使用electron的getAppPath()函式。
getAppPath()函式可以直接取得你的執行檔路徑。要注意的是,他產出來的完全路徑包含自己這個exe檔
也就會是D:\electron-vue\test.exe
若直接將你的TESTDB.db串在路徑後面的話,程式吃到的路徑會是D:\electron-vue\test.exe\TESTDB.db
所以用path串路徑時,要在後方補上..來消除你的exe檔名。

回到剛剛的src/renderer/assets/database.js檔案

  1. 匯入electron的remote模組,因為我們需要使用getAppPath()

    1
    import { remote } from 'electron';
  2. 修改filename的路徑

    1
    filename: path.join(remote.app.getPath('exe'), '../TESTDB.db'),

指到執行目錄後,接著就可以依你想要的目錄隨意調整
比如你要放在執行目錄的dbSotre下
那就在../後面指定路徑就行!

1
filename: path.join(remote.app.getPath('exe'), '../dbStore/TESTDB.db'),

這樣子程式就會吃到你手動放在目錄下的真實檔案了!