deluze / electron-vue-template Goto Github PK

Hi,

I install vue-router and try in createWindow to change the loadFile like that

updateWindow.loadFile(Path.join(app.getAppPath(), 'renderer', 'index.html#splash'));

But got an error
Not allowed to load local resource: file:///C:/laragon/www/temp/dist/win-unpacked/resources/app.asar/renderer/index.html%23splash

How I create Router

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Some help pls :) thx a lot

One of our dependencies uses the colors package, version 1.4.1, which npm reverted.

To fix this for now, please run npm update, to update the dependencies in this template. after that, the npm install command works again.

I'll push the updated packages later today.

Hi Deluze,
I like your template very much, and I want to use any of the following UI frameworks to integrate into this template, but I have been in contact with vue and electron for a short time, and I encountered various intractable errors when trying to integrate, which made me unable to continue.
So I would like to ask you, is it possible to integrate any of these frameworks into our template? Because these two UI frameworks are very beautiful and easy to use, the integration can help us complete the development work more quickly and efficiently.
Thanks again!

View-UI-Plus: https://github.com/view-design/ViewUIPlus (old version -> ViewUI: https://github.com/view-design/ViewUI)
Element-Plus: https://github.com/element-plus/element-plus

I am developing an application using this template and everything works fine on the dev server.

When building the application (for windows), when starting the it I get an error stating that a file under static folder is not found:

Error: ENOENT, static\resources\settings.json not found

The code:

const appPath = app.getAppPath();
join(appPath, 'static/resources', 'settings.json');

Do you know what I am doing wrong?
Thanks in advance

Hey !
First thanks for your work, i use your template and it's very usefull !
I have an issue when i use electron + axios. I make some axios request, everything works when i am in dev mod.
But when i build i have 401 error. Is there a fix/trick to make axios works when i build?
I don't know if i explain well my problem ^^'

Thanks !

如何打包成windows执行程序？

According to the current project, I can easily use contextBridge from the render process to send messages from the vue process to the main process, but conversely, I do not know how to respond to the message events sent by the main process within the life cycle of the main process.

Hi,

Thanks for using this template, you're awesome :)

Please only submit an issue if it's template related. e.g. incorrect Electron Builder config.

If you have any issue/questions about how to use Electron or Vue, please open a discussion.

If you're not sure if it's an issue related to the template, then opening a discussion is preferred, so we can troubleshoot there.

after i build:mac, then i open the .dmg seeing all white with nothing and devtools shows:

chromewebdata/:1 Not allowed to load local resource: file://xxx/dist/mac-arm64/xxx.app/Contents/Resources/app.asar/renderer/index.html

Since this project is inspired by electron-vue, it is safe to assume that there will be some way to support static assets

How do we assess static assets with this, please?

I am using electron the first time and using your template. I love it. Thanks. But I am using Vue Pina as store and would like to implement a persistent store via electron-store similar to this blog post: persistent vue-electron I am struggling to access electron store in Vue.js.

It's starting with the error message:

Uncaught ReferenceError: __dirname is not defined
    at node_modules/electron/index.js (index.js:4:28)
    at __require2 (chunk-7FP5O474.js?v=6a998cbc:10:50)
    at node_modules/electron-store/index.js (index.js:3:44)
    at __require2 (chunk-7FP5O474.js?v=6a998cbc:10:50)
    at index.js:81:18

when I init the electron store in my pina store:

import Store from "electron-store";
const persistentStore = new Store();

Maybe you have an idea?

Hi Bro,
I used this template and tried to load a .glb 3D model in Electron using three.js, but couldn't success.
I tried both the local .glb and the remote one without success, always just a black background.
I spent 2 days without finding a solution, also tried to add assetsInclude: ['**/*.glb'] to vite.config.js, also can't render.
Refer to this guide, and glb file in Public directory.

• https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

So have to resort to you, here is the project file, can you help to check this cause when you have time? Thank you very very much!

electron-vue-template.zip

This is awesome work so far getting the template and the build process, everything was seamless. I'm on a mac, so I have the dmg build, but what about with the windows exe process? How might one build for that, not sure if its in the electron settings?

1. install vite-plugin-electron-renderer
   npm install vite-plugin-electron-renderer

2. change vite config

...
import renderer from 'vite-plugin-electron-renderer'
...
const config = defineConfig({
  ...
  plugins: [vuePlugin(),renderer()],
  ...
})

Dependecies are out of date:
Electron: 22.0.2 => 23.0.0
Vite: 4.0.4 => 4.1.1
Vue: 3.2.40 => 3.2.47

@vue/cli is a tool based on webpack, in this case, it is not needed by this template. If there is any other concerns, this dependency should be kept.
:smil:

Hi @Deluze would it be possible to include the VSCode debug files (launch.json and tasks.json) in the template? If not, do you have any recommendations on how to create them?

Thank you very much in advance!

tray icon path

The path of the pallet cannot be found after packaging

in createWindow function

How should I fill in the path

Thank you.

Anybody here has tried or had success using bytenode with electron and vite?

It seems the files option is electron-builder.json define the file from build folder to dist\xxx-unpacked\resources\app because I found out the main static files are not copied from src\main\static to build\main\static on win11, so I added below code to function buildMain() in build.js

    FileSystem.cpSync(Path.join(__dirname, '..', 'src', 'main', 'static'), Path.join(__dirname, '..', 'build', 'main', 'static'), {recursive:true});

Did you encounter this issue?

Hello,
This is a great project. I'm very new to VueJS itself (let alone Electron) so I understand that it might be unfair to post an issue here but I didn't know who else to turn to.

I'm not very skilled with VueJS nor am I skilled with Electron. I'm trying to import 2 stylesheets and 2 scripts in my renderer index.html like so:

<link rel="stylesheet" href="../main/static/css/plugins.bundle.css">
<link rel="stylesheet" href="../main/static/css/style.bundle.css">
Under the title in the header

And the below scripts under the ./main.ts import
<script src="../main/static/js/scripts.bundle.js"></script>
<script src="../main/static/js/plugins.bundle.js"></script>

I still get a 404. What am I doing wrong (other than presumably everything)? I'd be eternally grateful if you'd be so kind so help me out here.

Also, a side note is that scripts.bundle.js is exactly what it sounds like, a bundle of scripts which everything libraries like popper, jQuery and Swal.

Hey @Deluze,

I've brought in Pinia for my state management and noticed state changes don't get HMR automatically. How can I get Vite to notice the changes and update the UI?

Hi Deluze, I'd love this template so much!
But I'd like to see how to multithread time-consuming tasks based on this template. Do you have any more examples?

Would I need to place all of the database-oriented files into the "static files folder"?

Hello sir,

What do you think about adding vue-devtools and devtron to this repo?

Thanks.

so i'm adding an 404.png in renderer/public,
and using it like src="/404.png"

it worked at develop mode, but failed to load at prod mode.

it seems like after build at prod mode, the resource path become strange

Hi Deluze
I'm trying to build a second window(set show=false) to deal with the loading state when reading large files, which causes the interface to become unresponsive.

But now I try to load the corresponding ts (remote.ts) file in the html (remote.html) file of the second windows, and then encounter these errors when calling other custom files(cross-values.ts) in this remote.ts file, I don't know how to solve it, and I haven't found an effective way to check the information.

If I import the ts script this way, I get this error:

Option 1:

<script type="application/javascript" src="./../main/remote.ts"></script>

Option 2:

<script type="module">require("./../main/remote.ts")</script>

Option 3:

<script type="module" src="./../main/remote.ts"></script>

remote.ts

cross-values.ts

file list.

remote.html

I have not been able to find the answer to this question in Google, so I would like to ask if you have encountered any similar problems.

How do I stop these runtime errors?

Hi,

How I can add alias for main process. I tried many thing like add package 'module-alias' but not work perfectly.

For renderer process it's easy in vite.js add a resolve like

resolve: { alias: { '@': Path.join(__dirname, '..', 'src', 'renderer') } }

Thank's for you help !
Kind Regards

Running npm install warns of vulns in packages. Is it safe to run npm audit fix --force to upgrade or will that cause breaking changes? I don't see this issue with standard vue/vite templates so im assuming this is related to this repo.

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

when i run npm run start,some thing with wrong

09:22:42 [vite] Internal server error: __name is not defined
  Plugin: vite:vue
  File: /Users/fan/Desktop/project/timp-app/src/renderer/components/common/TitleBar.vue

Hi @Deluze, I added some conveniences to my project, and I would like to know if you are interested in a PR including:

• Eslint
• Prettier
• Vue TSC
• Debug for VSCode (currently working only with Main Process, but as Renderer Process can use DevTools debugger, it may be sufficient for now)
• Automatic code checker when on development env, including with visual alerts inside de app:

Is there a best practice for utilizing a SQLite database? Do I include it with the static files?

Greetings,

Is there a way to add typescript to this, I tried with the vue cli and was getting errors.