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: '',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的 ， 但是很实用
【electron-vue爬坑之打包后接口路径file://】在vue的main.js中写入下面一段代码
Vue.prototype.$api = "";在axios请求中直接写成
_this.$axios('post',_this.$api+'/login',data .then(data => {......})然后你会发现打包完就可以访问了 ， 但dev环境下缺少了proxy代理 ， 这样也不行啊
所以最终结果写成这样就可以解决问题了
Vue.prototype.$api = process.env.NODE_ENV == 'development' ? "/invoice" : "";以上内容亲测有效
如果帮助你解决了问题
请点赞
收藏
转发喔
感谢支持！