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开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!