![04eafcebf2310b81f0e892e0934bf136.png](https://i-blog.csdnimg.cn/blog_migrate/dd78dbe037015a9ea371b5ba4193189e.jpeg)
教程源码:
nofacer/vue3-electrongithub.com![8c71fff2e6d9fcd9eb9c125e3ec669d9.png](https://i-blog.csdnimg.cn/blog_migrate/2708da696d58a322fb566acfd33b313f.png)
之前写过一篇文章Vue结合Electron构建跨平台应用(TDD)。当时的方法后来发现了一个问题,就是打包后的应用拿到其他机子上没法用,原因在于index.html的地址是个绝对路径,在打包的时候就被固定下来了。
![9b18cfe1b3f4bae8af41f6c26c488e77.png](https://i-blog.csdnimg.cn/blog_migrate/a18caaedd430d5aef7e6048912542ca2.jpeg)
在查阅了许多资料后发现之前将二者结合的方法不是很有效(开发和生产环境不一致等),正好Vue3也进入beta阶段了,因此想借着这个机会重新梳理一下这个话题。打算不借助各种快捷生成项目的cli从零将二者有机结合起来,这样可以加深对各种构建工具的了解。
涉及内容:
- Vue
- Electron
- Webpack
- Scss
安装Webpack
![b53ccd438015dfcf3bc0e20fa4a84a36.png](https://i-blog.csdnimg.cn/blog_migrate/bf75bdc7815d819e2e8f80b67a4ea9b4.jpeg)
新建./index.html
![b836f206f98e013cf585094b7e321c65.png](https://i-blog.csdnimg.cn/blog_migrate/ef5eaac6f9cac3d53fd7f8377a45c09f.jpeg)
这里通过script src的方式导入了lodash,为了后面测试webpack能否正常工作。 新建./index.js
![63fddf4cb28037fdf3703afd2587816d.png](https://i-blog.csdnimg.cn/blog_migrate/f480182c343deb0fdeadc0eb1ac2dcbd.jpeg)
用浏览器打开index.html,不出意外应该能看到Hello webpack页面。 运行npm install -D lodash
在本地安装lodash。修改./index.js
,通过包引入lodash。
![3091e0c06ca3bb74a1b91ed118662a0f.png](https://i-blog.csdnimg.cn/blog_migrate/f9ceda69f2518dc0236dab0a45b7aab5.jpeg)
新建./webpack.config.js
来配置webpack的行为。
![68fb82ce7cc3fc52c1b64616732974d8.png](https://i-blog.csdnimg.cn/blog_migrate/9f804c8a738c8e0d7fac81bdda87ce94.jpeg)
运行npx webpack
,正常情况应该在./dist/bundle.js
中有我们所有的js内容。 将./index.html
的内容修改为
![08654732e075aab2749daea8d81ad4b2.png](https://i-blog.csdnimg.cn/blog_migrate/c2ce8e000b6aacc3edeac31576368d17.jpeg)
在浏览器中打开看到的应该是和之前一样的界面。说明webpack正常工作了。
安装Vue3
![b4e8f895cde15ae62980d2adf0fbc610.png](https://i-blog.csdnimg.cn/blog_migrate/84b5129b820f2fe63da9b41a80654e7c.png)
vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs)
修改./index.js
,新建一个vue应用。
![5f4e86fe1f2aad15c1b5391fa46e4b52.png](https://i-blog.csdnimg.cn/blog_migrate/22c974e94decc73c7ab6fe439e0ad124.jpeg)
新建./App.vue
![a1662833c5757cf61913bae8cf491db8.png](https://i-blog.csdnimg.cn/blog_migrate/ab02d19c9231e8ef0b5561818d9192d6.jpeg)
再新建个src/components/HelloWorld.vue
![582aa5880ecb52390fda7c5ec68f2475.png](https://i-blog.csdnimg.cn/blog_migrate/33425d26df045707e8f414dea7aeffb1.jpeg)
最后再在./index.html
的<body>
中加一个<div id="app"></div>
![74c0fe0b90d559cf93989ee5e793a60e.png](https://i-blog.csdnimg.cn/blog_migrate/c2f08c02d948cc2d5b3c78907533c8f2.jpeg)
./node_modules/.bin/webpack --config webpack.config.js
后在浏览器中打开index.html,应该可以看到“Welcome to Your Vue.js App”几个大字。
引入样式(Scss)
到目前为止,我们的应用还没有设定什么样式,接下来我们看看样式怎么被一起打包。
https:// vue-loader.vuejs.org/gu ide/pre-processors.html
在src/components/HelloWorld.vue
的末尾加上一点样式
![6807ec403165913bdda65037590103dd.png](https://i-blog.csdnimg.cn/blog_migrate/357630b9b802c4df8ecfa5e5416c5fb1.jpeg)
这时候build是会报错的
You may need an additional loader to handle the result of these loaders.
|
> $nav-color: #F90;
| h1{
| color: $nav-color;
我们需要安装一点东西npm install -D style-loader sass-loader node-sass css-loader
。之后修改./webpack.config.js
![44ed9336473a5e7c168bdaed5882db97.png](https://i-blog.csdnimg.cn/blog_migrate/40f449822e41dd704af51fb668a10458.jpeg)
build后打开网页,文字应该变成了橙色。这种方式是通过single-file component的形式添加的样式,接下来我们再通过import external scss文件的形式添加样式。新建./src/style/common.scss
![31c63851bc35a228b38400886ce7719e.png](https://i-blog.csdnimg.cn/blog_migrate/3bf563e78751dc4337b85df917f8024b.jpeg)
在./index.js
里加入scss文件
![cfeefdc4178253e5000c12f5f0e95d4e.png](https://i-blog.csdnimg.cn/blog_migrate/5655a608a120b29f9aefe44876fd1580.jpeg)
到目前为止,最终的网页看起来应该像这样:
![66b24f8a83a138a92fb544e80258959b.png](https://i-blog.csdnimg.cn/blog_migrate/d6567274c7eca42b602d67f12955764c.png)
引入图片资源
图片也可以被当成模块利用webpack打包,后期管理资源路径比较方便。修改HelloWorld.vue的template
![27c064517f3915682f17f981d7f6ff15.png](https://i-blog.csdnimg.cn/blog_migrate/ab65eacbc916e0939f1819b045fa619e.jpeg)
在webpack.config的rules中加上
![ced4b3b40b52bcab7d160bb97b91726b.png](https://i-blog.csdnimg.cn/blog_migrate/8727f5c881ecd58f90b95f51fe3320c4.jpeg)
Babel
因为我们用的都是最新的Electron,浏览器内核都比较新,新的JS特性也都支持,就不安装Babel了。
安装Electron
重头戏终于来了。npm i -D electron@latest
安装最新的electron。新建./main.js
作为electron的入口文件。
![53d5ab2b5d24920e155497d053ca4ee9.png](https://i-blog.csdnimg.cn/blog_migrate/34838aee1da2deff50b208117e93af5e.jpeg)
由于增加了main文件作为Electron的入口,再加上index文件作为Vue的入口,现在一共两个入口,需要修改entry配置。同时,我们需要在配置中指定打包应用类型,将target设置为electron-renderer
。修改后如下:
![d8d3d457ad0d7f5edd26f31296be6ead.png](https://i-blog.csdnimg.cn/blog_migrate/8adbd9a6d3f5040862ccc92d22596656.jpeg)
修改package.json中的"main": "./dist/main.js"
。scripts中加一个"start": "electron ."
。npm run build
后npm run start
应该可以看到electron app成功启动。
Publish配置
如果要打包应用还有些东西要调整。安装npm i -D electron-builder
。 在package.json中加入
![70108b4b777de136629aa6d68be0026a.png](https://i-blog.csdnimg.cn/blog_migrate/c68eaea2e31de53affaef0d68385fdfe.jpeg)
Then you can run yarn dist (to package in a distributable format (e.g. dmg, windows installer, deb package)) or yarn pack (only generates the package directory without really packaging it. This is useful for testing purposes).
为了确保所有依赖都匹配electron的版本,再在package.json中加入"postinstall": "electron-builder install-app-deps"
增加build的配置,将dist文件夹和index.html包含进去,打包输出路径为package。最终的package.json应该长这样
![0d3fb68a36b33602f00b46a1fd850402.png](https://i-blog.csdnimg.cn/blog_migrate/e02d0570f18947dc08b37decec849dec.jpeg)
运行npm run dist
看看能不能打包成功。
![a952cc862e4ed82c1bf86a142eeb3d40.png](https://i-blog.csdnimg.cn/blog_migrate/86b50d2d1757fabd3a2559170fc98d71.png)
微调下样式,最终的效果应该是这样
![5cb5c684a061bfdcbcf90507864f5fef.png](https://i-blog.csdnimg.cn/blog_migrate/737dfdd2b9b0d0141fe989036b6671f0.jpeg)
后话
目前的配置只适合作为Demo,更详细的配置请移步Github。顺便记得点个 哦~
nofacer/vue3-electrongithub.com![8c71fff2e6d9fcd9eb9c125e3ec669d9.png](https://i-blog.csdnimg.cn/blog_migrate/2708da696d58a322fb566acfd33b313f.png)