Tworzę sobie sam apkę w electronie korzystając z Vue2 na renderer. Użyłem vue-electron boilerplate na starcie żeby wszystko szybko poustawiać. Początkowo miałem problem z załadowaniem odpowiedniego route'a do nowo powstałego okna
const preview = process.env.NODE_ENV === 'development'
? `http://localhost:9080/#/preview` // this is OK in developoment
: `file://${__dirname}/index.html#preview` // this doesnt work in production
próbowałem zmienić ten drugi path, żeby mi złapało ten route
- ` file://${__dirname}/index.html/!#/preview `
- ` file://${__dirname}/index.html/preview `
- ` file://${__dirname}/index.html/#/preview `
ale żaden z powyższych nie działa, pokazywała się pusta strona. Szukałem w necie znalazłem na GH issue, w którym gość proponuje skonfigurować webpack w taki sposób aby wypluwał więcej niż 1 plik .html. Innymi słowy zaproponował ażeby tworzyć nowe instancje Vue, jakoby nowe aplikacje do każdego okna. Dzięki temu za każdym razem w oknie można pokazywać route ` / `. To wszystko działa lokalnie na kompie więc stwierdziłem, że nie będzie miało to wielkiego wpływu na wydajność więc tak też zrobiłem, teraz webpack entry mam takie:
entry: {
first: path.join(__dirname, '../src/renderer/pages/first.js'),
second: path.join(__dirname, '../src/renderer/pages/second.js'),
third: path.join(__dirname, '../src/renderer/pages/third.js'),
fourth: path.join(__dirname, '../src/renderer/pages/fourth.js')
},
i w pluginach
plugins: [
...
new HtmlWebpackPlugin({
filename: 'first.html',
chunks: ['first'],
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
...// etc- new HtmlWebpackPlugin for each of entries...
Problem w tym, że każdy ten plik jest defakto taki sam i powtarza się dużo kodu i ogólnie średnio mi się podoba taka architektura. first.js, second.js itd. wyglądają tak jak main.js w nowo wygenerowanym projekcie przez Vue CLI. Importuje store, importuje router tworzę `new Vue(..)`. Jedyne czym się różnią te plik to inny import routera.
Mógłbym zrobić jakąś funkcję czy coś, która by mi pobrała odpowiedni router w tych plikach first.js, second.js itd żeby móc stworzyć uniwersalny jeden plik ( zamiast first, second itd ) tylko musiałbym coś przekazać. Bo jakbym miał np.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
class ParentRouter {
constructor(window) {
this.window = window;
this.router = {};
this.availableRoutes = [
{name: 'first', path: './routes/first'},
{name: 'second', path: './routes/second'},
{name: 'third', path: './routes/third'},
{name: 'fourth', path: './routes/fourth'},
]
}
createRouter() {
const currentPath = this.availableRoutes.filter(e => ( e.name === this.window ));
this.router = new Router({
routes: process.env.NODE_ENV === 'production'
? import(currentPath.path) // imported route is array of objects
: import(this.availableRoutes[0].path + '.js')
});
return this.router;
}
//... other methods
}
export default ParentRouter;
to mógłbym tego użyć w tym uniwersalnym pliku
import Vue from 'vue'
import axios from 'axios'
import App from '../App'
import Router from '../routers/router';
const routerInstance = new Router('add');
const router = routerInstance.createRouter();
if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
Vue.http = Vue.prototype.$http = axios;
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
components: { App },
router,
template: '<App/>'
}).$mount('#app');
tylko jak widzicie muszę przekazać do konstruktora ParentRouter nazwe okna. A mi to webpack importuje tworzy te pliki `.html` i nie wiem za bardzo jak mógłbym taki uniwersalny plik zrobić. Żeby połączyć to first.js, second.js itd w jeden plik wtedy też w konfiguracji webpacka nie będę potrzebował już powtarzać ` new Plugin.. `.
Proszę o jakąś sugestie.