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

發表於 更新於 分類於 ， Disqus：
用electron-vue開發時，在開發過程可以直接無腦地直接指定路徑至要操作的檔案，但最終要產出成品時，就不能用這樣的寫法，因為程式打包後，路徑指向就會完全不同

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

nedb注入vue全域使用

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

src/renderer/assets/database.js

1. 宣告nedb

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

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上方引入

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

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

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

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()

    import { remote } from 'electron';

  2. 修改filename的路徑

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

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

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

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