electron-vue爬坑之打包后接口路径file://

最近开发electron-vue的时候遇到一个坑

于是到网上一顿找

但根据每个人的写法或用的框架不一致

导致网上的资料不是正确的

最终结果是也没找到解决方案

就像在平坦的柏油路上奔驰

一个小坑会让你措不及防而翻车

坑1、在vue-cli创建的electron项目中，dev环境下用axios访问接口跨域问题

这个问题好解决

在vue.config.js配置中写入如下代码

module.exports = {
	// 第三方插件配置
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				"win": { //win相关配置
					"icon": "./public/logo.ico", //图标，当前图标在根目录下，注意这里有两个坑
					"target": [{
						"target": "nsis", //利用nsis制作安装程序
						"arch": [
							"x64", //64位
						]
					}]
				},
				"mac": {
					"icon": "./public/inv_tool.ico"
				},
				"nsis": {
					"oneClick": false, // 是否一键安装
					"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
					"allowToChangeInstallationDirectory": true, // 允许修改安装目录
					"installerIcon": "./public/logo.ico", // 安装图标
					"uninstallerIcon": "./public/logo.ico", //卸载图标
					"installerHeaderIcon": "./public/logo.ico", // 安装时头部图标
					"createDesktopShortcut": true, // 创建桌面图标
					"createStartMenuShortcut": true, // 创建开始菜单图标
					"shortcutName": "AppDemo", // 图标名称
				},
			}
		}
	},
	lintOnSave: false,
	devServer: {
		host: '0.0.0.0',
		port: 8080,
		hotOnly: true, // 热加载
		proxy: { //配置跨域
			'/apiUrl': {
				target: 'http://118.192.93.6:8080/tool',
				ws: true,
				changOrigin: true, //允许跨域
				pathRewrite: {
					'^/apiUrl': ''
				}
			}
		}
	},
}

注意打包的ico文件要用256*256的

其中nsis可根据项目需求自行选择要不要安装配置选择

如果不需要他自带的安装程序包，要自定义好看安装程序包

可以去看我的文章《关于客户端自定义安装界面开发分享》

以上是解决dev环境下访问接口跨域问题的解决方案

坑2、在npm run electron:build之后，运行程序，所有的访问接口Request URL

都会变成file:///D:xxx/xxx/正确的应该是http://xxx或者https://xxx

是因为electron中设置了win.loadURL访问了本地index.html文件导致

if (process.env.WEBPACK_DEV_SERVER_URL) {// dev环境
	win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
	win.webContents.openDevTools()
} else {// 打包环境
	createProtocol('app')
	win.loadURL(`file://${__dirname}/index.html`);
}

这个问题解决办法挺low的，但是很实用

在vue的main.js中写入下面一段代码

Vue.prototype.$api = "http://118.192.93.6:8080/tool";

在axios请求中直接写成

_this.$axios('post',_this.$api+'/login',data
	.then(data => {
  ......
})

然后你会发现打包完就可以访问了，但dev环境下缺少了proxy代理，这样也不行啊

所以最终结果写成这样就可以解决问题了

Vue.prototype.$api = process.env.NODE_ENV == 'development' ? "/invoice" : "http://116.196.95.4:8080/tool";

以上内容亲测有效

如果帮助你解决了问题

请点赞

收藏

转发喔

感谢支持！