Electron-vue: How to serve an application in the browser, as well as desktop app?

[nicklaw5]

I'm trying to configure my electron-vue app to run as both a desktop and browser application, but I just can't get it to work with the browser throwing this error: build.js:61Uncaught ReferenceError: require is not defined.

Essentially what I'm attempting to do is run the app with node_modules/.bin/webpack-dev-server --inline. which deploys the app to localhost:8080. The above error is displayed in the console upon browsing to that URL.

I have done this sort of thing in the past with a previous project, however in that project I was using nwjs rather that electron.

My assumption is that there are configuration changes I need to make to webpack.config.js, but after doing a little googling, those changes haven't yet presented themselves. Has anyone accomplished this in the past? What changes do I need to make?

[SimulatedGREG]

@nicklaw5

The big configuration change would need to be setting the webpack target to web instead of electron-renderer where require is defined. After that, most things should work as expected within the browser, with the exception of require('electron') (like when using vue-electron).

[nicklaw5]

@SimulatedGREG

You legend! That worked.

For those that stumble across this in the future, there are three things you need to do:

1. in webpack.config.js, change target: 'electron-renderer' to target: 'web' (as @SimulatedGREG suggested above); and
2. in app/src/main.js comment out both lines that read import Electron from 'vue-electron'; and Vue.use(Electron); then
3. from the console run:
   
   
   
   • npm run pack
   
   
   • node_modules/.bin/webpack-dev-server --inline
   
   

This procedure will server your app to localhost:8080, however, now you've broken you electron desktop app. I'd recommend setting up an environment variable that you can catch in your app to include/exclude the electron module, and for switching the webpack targets around.

[yyman001]

i try it ,but no work, run agin is close...

[Chieftl]

@SimulatedGREG Is it possible to run Electron-vue in the browser & in desktop app simultaneously from one instance?
For example, I need page1.vue in app (editor) & page2.vue in browser (viewer).
But there are many Uncaught ReferenceError: require is not defined errors on http://localhost:9080/