feat(build): allow changing file loading protocol, fixes #183

Author: nklayman

__tests__/commands.spec.js

@@ -299,20 +299,22 @@ describe('electron:build', () => {
     )
   })
 
-  test('Base url is set to "app://./"', async () => {
+  test('Base url/public path is set to "app://./"', async () => {
     const { options } = await runCommand('electron:build')
     expect(options.baseUrl).toBe('app://./')
+    expect(options.publicPath).toBe('app://./')
   })
 
-  test('Base url is set to "./" if pluginOptions.noAppProtocol is set', async () => {
+  test('Custom file protocol is used if set', async () => {
     const { options } = await runCommand('electron:build', {
       pluginOptions: {
         electronBuilder: {
-          noAppProtocol: true
+          customFileProtocol: 'expected'
         }
       }
     })
-    expect(options.baseUrl).toBe('./')
+    expect(options.baseUrl).toBe('expected')
+    expect(options.publicPath).toBe('expected')
   })
 })
 

docs/guide/configuration.md

@@ -113,6 +113,26 @@ module.exports = {
 If you decide to add the `@vue/typescript` plugin to your app later on, make sure to re-invoke the generator of VCP-Electron-Builder with `vue invoke electron-builder`. This will automatically insert missing type definitions to your `background.ts` file.
 :::
 
+## Changing the File Loading Protocol <Badge text="1.0.0+" type="info"/>
+
+By default, the `app` protocol is used to load files. This allows you to use ES6 `type="module"` scripts, created by Vue CLI's [modern mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode). If, for some reason, you would like to use a different protocol, set it with the `customFileProtocol` option, and change it in your `background.js` file.
+
+```javascript
+// vue.config.js
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      customFileProtocol: 'myCustomProtocol://' // You can also revert back to the file protocol with 'file://'
+    }
+  }
+}
+
+// src/background.js
+// ...
+win.loadURL('myCustomProtocol://./index.html') // Change it here as well
+// ...
+```
+
 ## Bundling Options <Badge text="1.0.0-rc.3+" type="info"/>
 
 By default, the app is built in [modern mode](https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode). To disable this, use the `--legacy` argument in the `electron:build` command. If your app is already bundled and just needs to be built with electron-builder, pass the `--skipBundle` arg.

index.js

@@ -105,9 +105,9 @@ module.exports = (api, options) => {
             modern: !args.legacy
           }
           //   Set the base url so that the app protocol is used
-          options.baseUrl = pluginOptions.noAppProtocol ? './' : 'app://./'
+          options.baseUrl = pluginOptions.customFileProtocol || 'app://./'
           // Set publicPath as well (replaced baseUrl since @vue/cli 3.3.0)
-          options.publicPath = pluginOptions.noAppProtocol ? './' : 'app://./'
+          options.publicPath = pluginOptions.customFileProtocol || 'app://./'
           info('Bundling render process:')
           //   Build the render process with the custom args
           await api.service.run('build', vueArgs)