Скачать или смотреть How to Correctly Reference Vue.js from Electron-Forge Boilerplate

Struggling to reference `Vue.js` in your Electron application setup with Electron-Forge? Discover the right way to integrate `Vue.js` and avoid common pitfalls with this comprehensive guide!
---
This video is based on the question https://stackoverflow.com/q/62249936/ asked by the user 'Geo...' ( https://stackoverflow.com/u/6757657/ ) and on the answer https://stackoverflow.com/a/62252682/ provided by the user 'n-smits' ( https://stackoverflow.com/u/11295891/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do i correctly reference Vue.js node_module from electron-forge boilerplate?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Correctly Reference Vue.js from Electron-Forge Boilerplate

If you're stepping into the world of Electron, Vue, and Webpack, it's easy to run into issues when trying to integrate these technologies. One common problem that many new developers face is how to correctly reference Vue.js from within an Electron-Forge boilerplate. This guide will help you understand the necessary steps for properly integrating Vue into your Electron application.

Understanding the Issue

You've set up a boilerplate project using Electron-Forge, and everything seems to work just fine until you try to include Vue.js from your node_modules. When you attempt to reference Vue directly from the node_modules folder in your HTML file, it fails to work correctly at runtime, although it appears fine during the development phase.

[[See Video to Reveal this Text or Code Snippet]]

The issue arises because the structure of the generated files by Webpack is different during runtime compared to development time. This misalignment means that files you reference might not actually exist in the output of your application when it's executed.

The Solution: Using Webpack to Reference Vue.js

1. Avoid Direct References to node_modules

To successfully integrate Vue.js into your Electron application, you need to bundle it using Webpack rather than trying to reference it directly from node_modules. This is crucial because Webpack packages everything in a way that makes it accessible at runtime.

2. Use Vue CLI to Create Your Project

A simpler way to set up your Electron + Vue project is to use the Vue CLI. This method automates much of the configuration needed. Here’s how you can get started:

[[See Video to Reveal this Text or Code Snippet]]

Once you've executed these commands, your project will be operational and ready for development!

3. Configure Router for Electron

When setting up routing using Vue Router, be aware that it may require special configuration to work correctly in an Electron environment. Specifically, you'll want to change the router's mode to hash instead of history. Update your router.js file like this:

[[See Video to Reveal this Text or Code Snippet]]

4. Inspect Your Configuration

If you ever feel lost regarding Webpack configurations generated by the Vue CLI, you can easily inspect this configuration. Run the following command to save a copy of the configuration to a file:

[[See Video to Reveal this Text or Code Snippet]]

5. Check the HTML Output

When your project is generated using Vue CLI, examine the /public/index.html file. You'll notice there is no mention of importing Vue directly because it is handled by Webpack for you. This is the beauty of abstraction through tools like Vue CLI.

Conclusion

Integrating Vue.js into your Electron application using Electron-Forge doesn't have to be a daunting task. By utilizing tools like Vue CLI and configuring your router correctly, you can simplify the setup process and avoid the common pitfalls associated with direct file referencing.

Remember, leveraging bundlers like Webpack ensures that all your dependencies are correctly included at runtime, making your development experience smoother.

Best of luck with your Electron and Vue journey!