Nuxt.js+Electronを試してみる
注意
本記事はElectronなどのバージョンが古いときのもののため新しく記事を書き直しました。
最新版はこちら
はじめに
electron-templateがあまりメンテされてない感じだったり、ビルド後もローカルでサーバーを立てて実行していたりだったので、一度自分で環境を作ってみようって感じの記事です。
この記事の手順で作ったものをいれたリポジトリ → クローズしました
セットアップ
Nuxt.jsの環境用意
とりあえずcreate-nuxt-appでNuxt.jsの環境を用意する
npx create-nuxt-app my-project
セットアップのときに選択した項目は下記
? Project name my-project
? Project description My badass Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Single Page App
? Use axios module no
? Use eslint no
? Use prettier no
? Author name tamfoi
? Choose a package manager npm
Nuxt.jsの設定周りを変更する
pagesなどのディレクトリを変更
appディレクトリに全部いれるようにする
module.exports = {
...
srcDir: 'app',
...
}
buildした時にサーバー無しで実行できるようにする
module.exports = {
...
router: {
mode: 'hash'
},
build: {
extend(config, ctx) {
config.output.publicPath = './_nuxt/'
}
},
...
}
electron周りの準備
electronとelectron-builderをインストール
npm install --save-dev electron
npm install --save-dev electron-builder
基本的にelectron-templateを参考にしながら設定を追加していく。
違うのはmain.jsでexe化後はローカルサーバーは建てずに起動するようにしたとかくらい
{
"name": "my-project",
"version": "1.0.0",
"description": "My perfect Nuxt.js project",
"author": "tamfoi",
"private": true,
"main": "main.js",
"scripts": {
"dev": "cross-env NODE_ENV=development electron .",
"build": "nuxt build && electron-builder"
},
"build":{
"appId": "my-project",
"directories": {
"output": "build"
}
},
"dependencies": {
"cross-env": "^5.2.0",
"nuxt": "^2.0.0"
},
"devDependencies": {
"electron": "^3.0.10",
"electron-builder": "^20.38.0",
"nodemon": "^1.11.0"
}
}
module.exports = {
...
dev: process.env.NODE_ENV === 'development',
...
build: {
extend(config, ctx) {
config.output.publicPath = './_nuxt/'
config.target = 'electron-renderer'
}
}
}
/*
** Nuxt
*/
const http = require('http')
const { Nuxt, Builder } = require('nuxt')
let config = require('./nuxt.config.js')
config.rootDir = __dirname // for electron-builder
// Init Nuxt.js
const nuxt = new Nuxt(config)
const builder = new Builder(nuxt)
const server = http.createServer(nuxt.render)
// Build only in dev mode
let _NUXT_URL_ = '';
if (config.dev) {
builder.build().catch(err => {
console.error(err) // eslint-disable-line no-console
process.exit(1)
})
// Listen the server
server.listen()
_NUXT_URL_ = `http://localhost:${server.address().port}`
console.log(`Nuxt working on ${_NUXT_URL_}`)
}else{
_NUXT_URL_ = 'file://' + __dirname + '/dist/index.html';
}
/*
** Electron
*/
let win = null // Current window
const electron = require('electron')
const app = electron.app
const newWin = () => {
win = new electron.BrowserWindow({})
win.maximize()
win.on('closed', () => win = null)
if (config.dev) {
// Wait for nuxt to build
const pollServer = () => {
http.get(_NUXT_URL_, (res) => {
if (res.statusCode === 200) {
win.loadURL(_NUXT_URL_)
} else {
console.log("restart poolServer");
setTimeout(pollServer, 300)
}
})
.on('error', pollServer)
}
pollServer()
} else {
return win.loadURL(_NUXT_URL_)
}
}
app.on('ready', newWin)
app.on('window-all-closed', () => app.quit())
app.on('activate', () => win === null && newWin())
最後に
とりあえず動いたので一旦記事化しました。
更新あればこの記事を編集する形にするか、別記事で書こうと思います。
特にmain.jsはまだ改良の余地がありそうな気がしてます。開発時の起動の遅さとかどうにかしたいです。
参考
nuxtでgenerateしたファイルをローカルで実行する。
How to run a nuxt generated website from filesystem?
Author And Source
この問題について(Nuxt.js+Electronを試してみる), 我々は、より多くの情報をここで見つけました https://qiita.com/tamfoi/items/0f70bc146344ba5acaee著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .