capacitor ionic 4 vue project net::ERR_FILE_NOT_FOUND

I created new vue project using vue create and added ionic & capacitor based on the following tutorial vue ionic capacitor Tutorial

yarn add @capacitor/core @capacitor/cli
yarn cap init 
yarn cap add android/ios and electron

 update capacitor.config.json as follow


  {
   "appId": "xxxx.xxx.xxxx.vuecapacitordemo2",
   "appName": "vuecapacitordemo2",
    "bundledWebRuntime": true,
    "npmClient": "yarn",
    "webDir": "dist"
   }

I have a problem when running electron, yarn run electron:start , I get net::ERR_FILE_NOT_FOUND .Googling for answers found couple of answers all lead to adding link_1 link_2 link_3 vue.config.js file with the following content. with different values for publicPath

 module.exports={
      publicPath: '/',
      runtimeCompiler: true
 }

That causes the application not to proceed beyond splash screen. Any hint/idea how to fix this ?

Thanks in Advance

Solution

I was able to get my electron app to run without errors by making two changes. First I added (projectRoot)/vue.config.js

module.exports = {
  publicPath: './',
}

I also added <base href="./"> within the <head> tag inside (projectRoot)/public/index.html

After making this change make sure to build "npm run build" and then "npx cap copy" to sync all your asset files and then test "cd electron & npm run electron:start"

For reference, I was getting errors similar to GET file:///js/chunk-de72da5c.95253596.js net::ERR_FILE_NOT_FOUND. After adding the changes to vue.config.js I noticed that links to my assets have the full path of the directory of my app.

The issues seems to be with how electron handles relative paths so you have to explicitly change how webpack compiles the paths by default. Hope this helps.