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

1. 关于 (Emitted value instead of an instance of Error)

错误提示：

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):

(Emitted value instead of an instance of Error)

错误截图：

错误代码：

问题解析：

这段代码在原先的vue项目中是没有问题的，copy到electron-vue项目之后，不明所以的报错。删掉lang="html"就可以正常运行了。至于原因，猜测vue项目和electron-vue项目中对于.vue文件的编译方式不同。待学习。

2. 遇到开发环境跨域问题，如何转发代理

在vue-cli项目中，处理开发环境的跨域问题，只需在config/index.js文件中配置proxyTable。大概长这样，（省略了不必要的参数），将我们项目中的接口请求转发到目标接口

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核心

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

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

EiElNxNf-1714282787197)]

[外链图片转存中…(img-WcOr3Ykj-1714282787198)]

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。