electron-vue 讀取本地文件(windows下以nedb為例)
使用electron-vue開發時,在開發過程可以直接無腦地直接指定路徑至要操作的檔案
但最終要產出成品時,就不能用這樣的寫法,因為程式打包後,路徑指向就會完全不同。
以下以nedb為例,說明electron-vue路徑指定方式以及如何讓nedb設定至全域,讓每個component可以直接使用。
(僅供範例,檔名、路徑隨各人喜好)
在new Vue上方引入
這裡可以使用electron的
也就會是
若直接將你的TESTDB.db串在路徑後面的話,程式吃到的路徑會是
所以用path串路徑時,要在後方補上
回到剛剛的
指到執行目錄後,接著就可以依你想要的目錄隨意調整
比如你要放在執行目錄的dbSotre下
那就在
但最終要產出成品時,就不能用這樣的寫法,因為程式打包後,路徑指向就會完全不同。
以下以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
檔案- 先匯入electron
因為我們需要使用getAppPath()
- 修改filename的路徑
import { remote } from 'electron';
filename: path.join(remote.app.getPath('exe'), '../TESTDB.db'),
指到執行目錄後,接著就可以依你想要的目錄隨意調整
比如你要放在執行目錄的dbSotre下
那就在
../
後面指定路徑就行!filename: path.join(remote.app.getPath('exe'), '../dbStore/TESTDB.db'),
這樣子程式就會吃到你手動放在目錄下的真實檔案了!
留言
張貼留言