Electron-vue脚手架改造vue项目（2024

dev: {

proxyTable: {

‘/**/*’: {

target: ‘http://192.168.1.1:8080/’, // 目标接口域名

changeOrigin: true // 是否跨域

}

}

}

在electron-vue项目中，并没有配置转发代理的地方，这就需要我们自己来解决跨域问题啦！

跨域问题出现的本质原因是浏览器的同源策略，注意是浏览器哦。只要绕过浏览器的限制（伪装成同源，欺骗浏览器）就能解决跨域啦，当然前提是服务器端允许跨域请求。

方法一：手动设置headers，以axios为例，将referer和host参数设置为，与后台接口一样的地址

axios.get(url, {

headers: {

referer: ‘https://c.y.qq.com/’, // 目标服务器地址

host: ‘c.y.qq.com’ // 目标服务器域名

},

params: req.query

}).then((response) => {

console.log(response)

}).catch((e) => {

console.log(e)

})

方法二：http-proxy-middleware中间件

既然vue-cli项目能够通过设置参数解决跨域问题，那我们就来倒推一下：

config/index.js  <--  build/webpack.dev.conf.js  <-  build/dev-server.js

在build/dev-server.js文件中我们可以看到http-proxy-middleware中间件的使用，就是她啦。那么怎么在Electron-vue中使用呢？

找到.electron-vue/dev-runner.js文件，修改如下：

引入中间件

const httpProxyMiddleware = require(‘http-proxy-middleware’)

在server.listen(9080)之前加一段代码，如下：

server.use(httpProxyMiddleware({

target: ‘目标服务器地址’,

changeOrigin: true

}))

server.listen(9080)

1. 什么是Electron

==================

**Electron可以让你使用纯 JavaScript 调用丰富的原生 API 来创造桌面应用。**你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。应用启动的入口是一个与 Node.js 模块相同的 package.json文件。

项目名称：Electron

项目官网：https://electronjs.org/docs

2. Electron核心

==================

electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉的前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。

简单理解就是：给web项目套上一个node环境的壳。

3. 什么是Electron-vue

=======================

Electron-vue是一个大神写的基于Vue和Electron的脚手架。

我们直接用Electron-vue这个脚手架来改造原来的vue-cli项目能够方便许多！

项目名称：electron-vue

项目地址：https://github.com/SimulatedGREG/electron-vue

项目文档：https://simulatedgreg.gitbooks.io/electron-vue/content/en/

下面实例解析如何通过electron-vue将一个vue项目改装成桌面应用。

4. 运用Electron-vue脚手架改造vue-cli项目

====================================

调整前（通过命令vue init webpack my-project 创建的vue项目）

改造后（通过命令vue init simulatedgreg/electron-vue my-project 创建项目，在用该命令初始化vue项目时，各个参数跟vue-cli初始化项目是一样样的）

调整步骤

将 原项目的src目录下的文件 拷贝到 当前项目src/renderer目录 下（没有看错，直接拷贝，全部拷贝）。调整好之后npm run dev启动，一片红啊

可能存在的问题

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
5%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！