개시하다

데스크톱 앱으로 디지털 표지판을 제작할 때 설정 파일을 읽을 수도 있고, 다른 회사가 컴퓨터에서 지정한 위치로 출력한 파일을 읽을 수도 있다
인터넷에서 주식 가격, 뉴스, 날씨 등의 정보를 얻어 화면에 자주 나타난다.
저번 이런 외부 파일(Json 데이터)을 읽는 절차를 썼지만 이번에는 PC에 설정된 설정 파일, 이미지, 애니메이션 등을 읽으려고 한다.
또 사용된 IDE는 JetBrains사WebStorm의Vue3 프레임워크의 사용법이다.

카탈로그

Electron과 Vue3의 준비

외부 파일 읽기

로컬 파일 읽기

fs 모듈을 통해 외부 파일 읽기

파일 경로

개발 환경과 공식 환경의 확인

구축 후에도 데이터를 편집하고 싶다

참조

컨디션

Windows 10 Pro 64bit

WebStorm 2021.1

Node.js v14.15.1

Vue 3.0.0

Electron 11.0.0

1.Electron과 Vue3의 준비.

지난번과 마찬가지로 우선 Electron에서 Vue3이 일하는 환경을 만들어야 한다.
이것을 설정하려면 WebStorm에서 Vue3의 Electron 애플리케이션 제작를 참고하십시오.
다음은 이 환경을 구축한 것부터 시작하는 해설.

2. 외부 파일 읽기

웹에서 파일 읽기

localhost에서 밑에 있는 파일을 읽기

컴퓨터 내 어딘가의 파일 읽기

저번에 이거였어요.「2.」이번에는라고 설명했다.
Node.js의 모듈fs을 사용하고 싶습니다.

3. fs 모듈을 통해 외부 파일 읽기

지난번에 사용한 날씨의 제이슨 파일로 읽고 싶습니다.
Json 파일의 위치를 문서에 임시로 두고 Json 파일의 속성에 따라 경로를 검사합니다.

위치가 C:\Users\accou\Documents이기 때문에 이 경로를 사용합니다.
이번에 파일의 읽기는 비동기 처리fs.readFileSync를 사용했다.동기화 처리를 원할 때는 fs.readFile를 사용합니다.
App.vue

<template>
<!-- 省略 -->
</template>
<script>
const fs = require('fs')
export default {
  name: 'App',
  mounted() {
    let response = JSON.parse(fs.readFileSync('C:/Users/accou/Documents/130000.json','utf8'))
    console.log(response)
  }
}
</script>
<style>
<!-- 省略 -->
</style>

제이슨 파일이기 때문에 fs 모듈로 파일을 읽은 후 JSON.parse()를 사용하여 제이슨 형식으로 데이터를 만들어 출력한다.
시행해보면 fs.readFileSync is not a function 이런 오류가 발생했기 때문에 이걸 해결한다.
package.json의 같은 레이어에 vue.config.js 파일을 생성합니다.
생성된 파일에 다음 코드를 기록합니다.
vue.config.js

module.exports = {
    pluginOptions:{
        electronBuilder:{
            nodeIntegration:true
        }
    }
}

이거 해볼게요.

잘 읽은 것 같아요.

4. 파일 경로

절대 경로로 파일 경로를 쓰면 파일을 읽을 수 있지만 Electron은 OS 고유 경로를 가져오고 실행 중인 응용 프로그램 경로를 가져오는 함수가 있어 설정 파일 등 응용 프로그램에 첨부된 파일 경로를 지정하는 데 편리하다.
응용 프로그램 디렉토리를 가져오는 경우app.getAppPath()OS별 디렉토리를 가져오려면 app.getPath(name)를 사용합니다.name에 home와appData 등 환경에 맞는 명칭을 넣으면 절대 경로를 얻을 수 있다.name의 명칭은 Electron 문서에서 확인할 수 있다.
그래서 나는 즉시 경로를 찾았다.
App.vue

<template>
<!-- 省略 -->
</template>
<script>
const fs = require('fs')
const remote = require('electron').remote  // <--追記
console.log('App path : ',remote.app.getAppPath())  // <--追記
console.log('Home path : ',remote.app.getPath('home'))  // <--追記
export default {
  name: 'App',
  mounted() {
    let response = JSON.parse(fs.readFileSync('C:/Users/accou/Documents/130000.json','utf8'))
    console.log(response)
  }
}
</script>
<style>
<!-- 省略 -->
</style>

시행해보면 Cannot read property 'app' of undefined 오류가 또 생겨서 이걸 해결한다.background.js 문서의 webPreferences에 보충하다.
background.js

'use strict'
<!-- 省略 -->
async function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule:true  // <--追記
    }
  })
  <!-- 省略 -->
}
<!-- 省略 -->

이거 해볼게요.
App Path : C:\Users\accou\Dropbox\WebstormProjects\vue3-electron\dist_electron 、Home Path : C:\Users\accou\, 그래서 잘 얻었다.
다만, getAppPath() index.의 경로입니다. 개발 환경과 정식 사용 환경에서 경로가 변경될 수 있음을 주의하십시오.

6. 개발 환경과 공식 환경의 확인

개발 환경과 공식 환경의 확인 방법process.env.NODE_ENV의 값으로 확인할 수 있다.
수치가 development면 개발환경, production면 공식환경이니까 이 수치에 따라

const isDevelop = process.env.NODE_ENV==='development'

이런 느낌으로 설정하면 isDeveloptrue개발 환경이면false정식 환경으로 전환하기 쉽다.

7. 구축 후에도 데이터 편집

실제 환경으로 구축할 때 dist_electron 디렉터리에서 데이터를 출력합니다
설치된 프로그램 형식이 아닌 프로그램 데이터는 dist_electron/win-unpacked의 위치에 저장됩니다.
) 파일 등의 편집 데이터는 dist_electron/win-unpacked/resources/app.asar에 봉인되어 저장됩니다.
포장하기 싫은 경우 vue.config.js에 추가해 주세요.
vue.config.js

module.exports = {
    pluginOptions:{
        electronBuilder:{
            nodeIntegration:true,
            builderOptions:{  // <--追記
                asar:false    // <--追記
            }                 // <--追記
        }
    }
}

8. 참조

app.getPath
WebStorm에서 Vue3의 Electron 애플리케이션 제작