You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**IMPORTANT: Your app must be created with Vue-CLI 3 (vue create my-app), will not work with Vue-CLI 2 (vue init webpack my-app)!**
8
8
9
-
**IMPORTANT: If you were previously using an older version of vue-cli-plugin-electron-builder (<1.0.0), please see the [upgrade guide](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/UPGRADING.md).**
9
+
**IMPORTANT: These docs are for the v1.0.0-beta release of VCP Electron Builder. If you were previously using an older version of vue-cli-plugin-electron-builder (<1.0.0), please see the [upgrade guide](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/upgrading.html) or [view the old docs](https://github.com/nklayman/vue-cli-plugin-electron-builder/tree/legacy).**
10
10
11
11
## Quick Start:
12
12
@@ -38,168 +38,4 @@ or with NPM:
38
38
39
39
`npm run build:electron`
40
40
41
-
### Folder Structure:
42
-
43
-
```
44
-
├── dist_electron/
45
-
│ ├── bundled/.. # where webpack outputs compiled files
46
-
│ ├── [target platform]-unpacked/.. # unpacked Electron app (main app and supporting files)
47
-
│ ├── [application name] setup [version].[target binary (exe|dmg|rpm...)] # installer for Electron app
48
-
│ ├── background.js # compiled background file used for serve:electron
49
-
│ └── ...
50
-
├── public/ # Files placed here will be avalible through __static or process.env.BASE_URL
51
-
├── src/
52
-
│ ├── background.[js|ts] # electron entry file (for Electron's main process)
This plugin is nearly production ready. It has test coverage for everything but the ui interface and proper logging of errors. It needs to be used a little bit more in large applications before it is considered safe to use in a large production environment. Please try it in your app and report any bugs or feature requests.
62
-
63
-
## Configuration:
64
-
65
-
### Configuring Electron Builder:
66
-
67
-
To see available options, check out [Electron Builder Configuration Options](https://www.electron.build/configuration/configuration)
68
-
69
-
They can be placed under the `builderOptions` key in vue-cli-plugin-electron-builder's plugin options in `vue.config.js`
70
-
71
-
```javascript
72
-
// vue.config.js
73
-
74
-
module.exports= {
75
-
pluginOptions: {
76
-
electronBuilder: {
77
-
builderOptions: {
78
-
// options placed here will be merged with default configuration and passed to electron-builder
79
-
}
80
-
}
81
-
}
82
-
}
83
-
```
84
-
85
-
### Webpack configuration:
86
-
87
-
Your regular config is used for bundling the renderer process (your app). To modify the webpack config for the electron main process only, use the `chainWebpackMainProcess` function under vue-cli-plugin-electron-builder's plugin options in `vue.config.js`. To learn more about webpack chaining, see [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain). The function should take a config argument, modify it through webpack-chain, and then return it.
88
-
89
-
**Note: Do NOT change the webpack output directory for the main process! See changing output directory below for more info. To change the entry point for the main process, use the `mainProcessFile` key, DO NOT modify it in through chaining.**
90
-
91
-
```javascript
92
-
// vue.config.js
93
-
94
-
module.exports= {
95
-
configureWebpack: {
96
-
// Configuration applied to all builds
97
-
},
98
-
pluginOptions: {
99
-
electronBuilder: {
100
-
chainWebpackMainProcess:config=> {
101
-
// Chain webpack config for electron main process only
102
-
},
103
-
mainProcessFile:'src/myBackgroundFile.js'
104
-
}
105
-
}
106
-
}
107
-
```
108
-
109
-
### Handling static assets:
110
-
111
-
#### Renderer process (main app):
112
-
113
-
In the renderer process, static assets work similarly to a regular app. Read Vue CLI's documentation [here](https://cli.vuejs.org/guide/html-and-static-assets.html) before continuing. However, there are a few changes made:
114
-
115
-
- The `__static` global variable is added. It provides a path to your public directory in both development and production. Use this to read/write files in your app's public directory.
116
-
- In production, the `process.env.BASE_URL` is replaced with the path to your app's files.
117
-
118
-
**Note: `__static` is not available in regular build/serve. It should only be used in electron to read/write files on disk. To import a file (img, script, etc...) and not have it be transpiled by webpack, use the `process.env.BASE_URL` instead.**
119
-
120
-
#### Main process (background.js):
121
-
122
-
The main process won't have access to `process.env.BASE_URL` or `src/assets`. However, you can still use `__static` to get a path to your public directory in development and production.
123
-
124
-
#### Examples:
125
-
126
-
```html
127
-
<!-- Renderer process only -->
128
-
<!-- This image will be processed by webpack and placed under img/ -->
129
-
<imgsrc="./assets/logo.png">
130
-
<!-- Renderer process only -->
131
-
<!-- This image will no be processed by webpack, just copied-->
132
-
<!-- imgPath should equal `path.join(process.env.BASE_URL, 'logo.png')` -->
133
-
<img:src="imgPath">
134
-
<!-- Both renderer and main process -->
135
-
<!-- This will read the contents of public/myText.txt -->
136
-
<script>
137
-
constfs=require('fs')
138
-
constpath=require('path')
139
-
140
-
// Expects myText.txt to be placed in public folder
If you don't want your files outputted into dist_electron, you can choose a custom folder in vue-cli-plugin-electron-builder's plugin options.
151
-
**Note: after changing this, you MUST update the main field of your `package.json` to `[new dir]/bundled/background.js`. It is also recommended to add the new directory to your .gitignore file.**
152
-
153
-
```javascript
154
-
// vue.config.js
155
-
156
-
module.exports= {
157
-
pluginOptions: {
158
-
electronBuilder: {
159
-
outputDir:'electron-builder-output-dir'
160
-
}
161
-
}
162
-
}
163
-
```
164
-
165
-
### Cli Options:
166
-
167
-
Arguments passed to `build:electron` are sent to electron-builder. To see available cli options, see [electron-builder's cli options](https://www.electron.build/cli). `serve:electron` takes no arguments.
168
-
169
-
### TypeScript Support:
170
-
171
-
Typescript support is automatic and requires no configuration, just add the `@vue/typescript` cli plugin. There are a few options for configuring typescript if necessary:
172
-
173
-
```javascript
174
-
// vue.config.js
175
-
176
-
module.exports= {
177
-
pluginOptions: {
178
-
electronBuilder: {
179
-
// option: default // description
180
-
disableMainProcessTypescript:false, // Manually disable typescript plugin for main process. Enable if you want to use regular js for the main process (src/background.js by default).
181
-
mainProcessTypeChecking:false// Manually enable type checking during webpck bundling for background file.
182
-
}
183
-
}
184
-
}
185
-
```
186
-
187
-
If you are adding typescript after vue-cli-plugin-electron-builder, you may also want to set `mainWindow`'s type to `any` and change `process.env.WEBPACK_DEV_SERVER_URL` to `process.env.WEBPACK_DEV_SERVER_URL as string` to fix type errors. If you add typescript first, this will be done automatically.
188
-
189
-
## How it works:
190
-
191
-
### Build command:
192
-
193
-
The build command consists of three main phases: render build, main build, and electron-builder build:
194
-
195
-
1. Render build: This phase calls `vue-cli-service build` with some custom configuration so it works properly with electron. (The render process is your standard app.)
196
-
2. Main build: This phase is where vue-cli-plugin-electron-builder bundles your background file for the main process (`src/background.js`).
197
-
3. Electron-builder build: This phase uses [electron-builder](https://www.electron.build) to turn your web app code into an desktop app powered by [Electron](https://electronjs.org).
198
-
199
-
### Serve command:
200
-
201
-
The serve command also consists of 3 main phases: main build, dev server launch, and electron launch:
202
-
203
-
1. Dev server launch: This phase starts the built in dev server with a few modifications to work properly with electron.
204
-
2. Main build: This phase, like in the build command, bundles your app's main process, but in development mode.
205
-
3. Electron launch: This phase launches electron and tells it to load the url of the above dev server.
41
+
To see more documentation, [visit our website](https://nklayman.github.io/vue-cli-plugin-electron-builder/).
**Note: This guide is for upgrading from <=v0.3.2 to >=v1.0.0.**
4
-
5
-
## Steps:
6
-
7
-
1. Re-invoke the generator for vue-cli-plugin-electron-builder by running `vue invoke electron-builder`. Make sure to update the package before running.
8
-
2. You may delete `src/main/index.js`. If you have modified it, those modifications must be moved to `src/background.js` after re-invoking the generator.
9
-
3. You may delete any electron-webpack config options, they will not be used. By default, they are in `package.json` under `electronWebpack`.
10
-
4. You may delete any electron-builderconfig options, they will not be used. By default, they are in `package.json` under `build`. Any changes that you have made to these must be [moved to plugin options](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/README.md#configuring-electron-builder).
11
-
5. You may remove `webpackConfig` and `webpackMainConfig` from vue-cli-plugin-electron-builder's plugin options. Webpack config for the renderer process is your normal webpack config, and you can use the `chainWebpackMainProcess` function ([guide](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/README.md#webpack-configuration)).
12
-
6. You may remove `electron-webpack`, `electron-builder`, and, if used, `electron-webpack-ts` from your devDependencies. You may also remove `source-map-support` from your dependencies.
13
-
14
-
## What has changed:
15
-
16
-
- Electron-webpack is no longer used. Instead, your app is built as normal (but with some slight configuration changes).
17
-
- This means there is no need to change your config to work with stylus, sass, or any other special files.
18
-
- Typescript support is [automatic](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/README.md#adding-typescript-support) for both processes, just add the `@vue/typescript` plugin.
19
-
- Your normal build will not be overwritten by `build:electron`.
20
-
- The [folder structure](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/README.md#folder-structure) has changed dramatically.
21
-
- Electron-builder's [config](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/README.md#configuring-electron-builder) is now taken from the `builderConfig` key in vue-cli-plugin-electron-builder's plugin options.
22
-
- To learn more about the internals of this plugin, see [how it works](https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v1-dev/README.md#how-it-works).
1
+
The upgrade guide has moved to [our website](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/upgrading.html).
0 commit comments