search

nklayman / vue-cli-plugin-electron-builder

Easily Build Your Vue.js App For Desktop With Electron
https://nklayman.github.io/vue-cli-plugin-electron-builder/
MIT License
4.12k stars 278 forks source link

/public files are not available through __static or process.env.BASE_URL #162

Closed vesper8 closed 5 years ago

vesper8 commented 5 years ago

I'm really not sure what I might be doing wrong. I am able to launch my vue-cli PWA in both serve:electron and build:electron. In serve:electron it looks and works perfect. In build:electron it is missing all the images that are part of the html

I've printed out both __static and process.env.BASE_URL and they are both the same. They both produce:

/Volumes/Dev/my-electron-app/dist_electron/mac/my-electron-app.app/Contents/Resources/app.asar

If I inspect the contents of the file my-electron-app.app I see a compressed app.asar file, and I see a folder called app.asar.unpacked

This folder does not contain the contents of my /public folder as the docs says it should. Instead there is only a node_modules folder containing puppeteer (which is another issue I think, this folder is almost 200mb big as a result.. why is this here? is it normal?)

I do see that the folder /dist_electron/bundled/ does contain the contents of my /public folder

What must I do so that these images are available when using build:electron?

I thought that perhaps this is a symptom of how I link to these images. Since my PWA is also built to be able to export to IOS/Android via Cordova. In my main.js I have this

Vue.prototype.$baseUrl = process.env.BASE_URL;

which I have now changed to

if (process.env.VUE_APP_PLATFORM === 'electron') {
  Vue.prototype.$baseUrl = `${__static}/`;
} else {
  Vue.prototype.$baseUrl = process.env.BASE_URL;
}

And then inside my components I have this (for logo.png as an example)

<img :src="`${$baseUrl}theme/img/logo.png`">

This produces a link like this:

/Volumes/Dev/my-electron-app/dist_electron/mac/my-electron-app.app/Contents/Resources/app.asar/theme/img/logo.png

But there is no image there to load. I'm also puzzled why these absolute links are being used.. shouldn't they be relative?

Hoping someone can help! Thanks!

nklayman commented 5 years ago

Have you made any changes to the electron-builder configuration? Once the files are place in dist_electron/bundled, electron-builder is in charge of bundling them into the asar. Puppeteer definitely should not be included in the bundle. Make sure it is in devDependencies, not dependencies. Try with a clean project vue create electron-test && cd electron-test && vue add electron-builder. It works fine for me on linux (public is included and no puppeteer). If you have issues on a blank project, you may want to open an issue on electron-builder.

vesper8 commented 5 years ago

Thanks for the quick reply @nklayman !

I have not made any changes to electron-builder, I wouldn't know how..

This is on an existing project.. here is the contents of my package.json. Puppeteer is not even in there so it must be a dependency of one of the other packages

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "cordova-build-android": "vue-cli-service cordova-build-android",
    "cordova-build-browser": "vue-cli-service cordova-build-browser",
    "cordova-build-ios": "vue-cli-service cordova-build-ios",
    "cordova-serve-android": "vue-cli-service cordova-serve-android",
    "cordova-serve-browser": "vue-cli-service cordova-serve-browser",
    "cordova-serve-ios": "vue-cli-service cordova-serve-ios",
    "electron:build": "vue-cli-service electron:build --mode electron-production",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.5.0",
    "@vuex-orm/core": "^0.30.0",
    "@vuex-orm/plugin-axios": "^0.2.2",
    "@websanova/vue-auth": "^2.21.13-beta",
    "axios": "^0.18.0",
    "bluebird": "^3.5.1",
    "bootstrap": "^4.0.0",
    "bootstrap-vue": "^2.0.0-rc.8",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "in-viewport": "^3.6.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "js-cookie": "^2.2.0",
    "keypress.js": "^2.1.5",
    "laravel-echo": "^1.3.5",
    "lodash": "^4.17.5",
    "messenger-hubspot": "^1.5.0-b2",
    "moment": "^2.22.2",
    "notifyjs": "^3.0.0",
    "owl.carousel": "^2.3.4",
    "popper.js": "^1.14.3",
    "prerender-spa-plugin": "^3.4.0",
    "promise": "^8.0.1",
    "pusher-js": "^4.2.2",
    "register-service-worker": "^1.0.0",
    "underscore": "^1.9.0",
    "urijs": "^1.19.1",
    "vanilla-back-to-top": "^7.2.0",
    "vue": "^2.5.17",
    "vue-axios": "^2.1.1",
    "vue-context-menu": "^2.0.2",
    "vue-headful": "^2.0.1",
    "vue-i18n": "^8.3.2",
    "vue-js-modal": "^1.3.12",
    "vue-js-toggle-button": "^1.2.2",
    "vue-multiselect": "^2.0.8",
    "vue-notification": "^1.3.6",
    "vue-pagination-2": "^1.6.2",
    "vue-plyr": "^5.0.4",
    "vue-router": "^3.0.1",
    "vue-script2": "^2.0.3",
    "vue-scrollto": "^2.13.0",
    "vue-spinner": "^1.0.3",
    "vue-sweetalert2": "^1.5.5",
    "vue-tables-2": "1.4.31",
    "vue-youtube": "^1.3.0",
    "vuedraggable": "^2.14.1",
    "vuex": "^3.0.1",
    "vuex-pathify": "^1.1.3",
    "vuex-persistedstate": "^2.4.2",
    "vuex-rest-api": "^2.6.1",
    "webpack": "^4.16.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-e2e-cypress": "^3.1.2",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-plugin-pwa": "^3.1.2",
    "@vue/cli-plugin-unit-mocha": "^3.1.1",
    "@vue/cli-service": "^3.1.4",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-eslint": "^10.0.1",
    "chai": "^4.1.2",
    "electron": "^2.0.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-cli-plugin-cordova": "^2.0.8",
    "vue-cli-plugin-electron-builder": "^1.0.0-rc.9",
    "vue-template-compiler": "^2.5.17"
  },
  "main": "background.js"
}

While I could (and I will) try on a new project.. I really need to get this to work on this existing project.. if you have any more ideas on what might be causing puppeteer to appear inside app.asar.unpacked.. or more importantly.. why the contents of my /public folder are not inside that folder (they are supposed to be in app.asar.unpacked aren't they?) then I would love to hear them

vesper8 commented 5 years ago

Found the culprit, this plugin https://github.com/chrisvfritz/prerender-spa-plugin was causing the puppeteer issue, moving it to devDependencies made that problem go away.

Couldn't solve the other issue however.. but I ended up just moving all my public images into the assets folder and let webpack handle them.. I suppose I might still run into trouble with other files such as the favicons though. Would love your input on whether I was doing something wrong above with my $baseUrl logic

nklayman commented 5 years ago

It is better to use assets for images, as described here. As for favicon, it isn't used in electron. Therefore, you should be fine. See electron-builder's guide on icons for more details.

BigPhilCombo commented 4 years ago

Hi there I'm encountering the same problem, assets placed into my 'PUBLIC' folder resolve to the .asar file path when using 'BASE_URL' environment variable. Is there another way to access public folder assets when using asar?