V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
godleon
V2EX  ›  程序员

请教大佬们在使用 electron 对 Vue 项目打包成 exe 的问题?

  •  
  •   godleon · 2023-06-30 11:07:04 +08:00 · 1975 次点击
    这是一个创建于 520 天前的主题,其中的信息可能已经有所发展或是发生改变。

    环境

    vue2
    electron 25.2.0
    node 14
    electron-store 8.1.0

    问题

    我使用 electron 对一个 Vue 项目打包成 exe 程序时,按照官方文档已经完全配置好,然后打包成功,但是我在运行 exe 程序的时候,会出现 token 一直丢失的问题。代码里拦截请求,然后登录拿到 token 加到请求头里

    1.使用 cooike ,不能登录
    2.使用 localstorage ,可以登录到首页,调其他接口又会丢失
    

    查询资料里,建议使用 electron-store,我参考官方文档配置好后,代码不能正常启动

    我的代码:

    const Store = require('electron-store');
    
    const eStore = new Store();
    
    /**
     * 请求拦截
     */
    http.interceptors.request.use(config => {
      config.headers['token'] = eStore.get('token')
      // config.headers['token'] = Vue.cookie.get('token')
      return config
    }, error => {
      return Promise.reject(error)
    })
    

    报错信息

     ERROR  Failed to compile with 1 errors                                                                                                                                                            下午 6:32:55
    
    error  in ./node_modules/electron-store/index.js
    
    Module parse failed: D:\money\counter\v1.7\counter-fast\counter-vue\node_modules\electron-store\index.js Unexpected token (53:3)
    You may need an appropriate loader to handle this file type.
    |               options = {
    |                       name: 'config',
    |                       ...options
    |               };
    |
    
    @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/views/common/login.vue 87:26-51
    @ ./src/views/common/login.vue
    @ ./src/views ^\.\/.*\.vue$
    @ ./src/router/import-development.js
    @ ./src/router/index.js
    @ ./src/main.js
    @ multi (webpack)-dev-server/client?http://localhost:8001 webpack/hot/dev-server babel-polyfill ./src/main.js
    

    ps

    一名后端仔,请教一下这是什么原因造成的,看源码他应该会找 appData 下的 userData.json ,文件来存储,但是没找到这个文件,我建了个文件也是这个错 不太理解...

    14 条回复    2023-07-01 12:29:26 +08:00
    henyi2211
        1
    henyi2211  
       2023-06-30 11:11:14 +08:00
    换 electron-builder 试试,没用过 electron-store 没啥建议可提供
    musi
        2
    musi  
       2023-06-30 11:15:42 +08:00
    只看你 get 没看你 set ,数据从哪来?
    godleon
        3
    godleon  
    OP
       2023-06-30 11:21:02 +08:00
    @musi 现在的情况是 我只写 const Store = require('electron-store'); const eStore = new Store(); 就启动不起来
    musi
        4
    musi  
       2023-06-30 11:27:47 +08:00
    @godleon 贴一下你的 babel 版本,看起来是 babel 不支持展开语法,但是为什么你的 Node 代码都需要 bable 编译?
    godleon
        5
    godleon  
    OP
       2023-06-30 11:33:25 +08:00
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "21.0.2",
    "babel-loader": "7.1.1",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
    "babel-plugin-transform-runtime": "6.22.0",
    "babel-preset-env": "1.3.2",
    "babel-preset-stage-2": "6.22.0",
    "babel-register": "6.22.0",
    @musi
    L3ve
        6
    L3ve  
       2023-06-30 11:39:26 +08:00
    问题应该是,electron-store 是后端模块,但是你 babel 去编译了它,这个应该是你整个构建流程有问题,本质上即使后端需要编译,也不应该去编译 node_modules 里的东西
    duan602728596
        7
    duan602728596  
       2023-06-30 12:42:37 +08:00
    babel 都已经是 v7 版本了,为什么还在用 v6 呢?
    musi
        8
    musi  
       2023-06-30 13:51:41 +08:00
    @godleon 根据你的报错链路看了一下,electron-store 应该是在 node 进程用的包,但是你在渲染进程用了,所以会有一系列的问题,正确做法是把 electron-store 放到 node 进程然后用 ipc 和渲染进程通信拿到数据,另外 electron-store 应该只用于数据持久化,你可以在前端也加个缓存这样可以减轻 ipc 的压力
    zsj1029
        9
    zsj1029  
       2023-06-30 14:17:28 +08:00
    session 直接存 cookie localstore 什么的足矣,没必要用到底层存储,简单业务复杂化
    godleon
        10
    godleon  
    OP
       2023-06-30 15:46:27 +08:00
    @zsj1029 cookie localstore ,我都用了,打包成 exe 的时候会丢失,但是在浏览器正常
    va3rrw
        11
    va3rrw  
       2023-06-30 16:09:50 +08:00
    最近业余在写 eletron APP ,以下是我的做法:
    va3rrw
        12
    va3rrw  
       2023-06-30 16:20:04 +08:00
    最近业余在写 electron APP ,以下是我的做法:

    在`main/index.ts`中,

    ```
    import log from 'electron-log'

    Store.initRenderer()
    ```

    同时在 BrowserWindow 的定义中:
    ```
    webPreferences: {
    preload: join(__dirname, '../preload/index.js'),
    contextIsolation: false,
    sandbox: false,
    },
    ```

    在 `preload/index.ts`中,

    ```
    import storeAPI from 'electron-store'

    // @ts-ignore (define in dts)
    window.store = storeAPI

    ```

    在`preload/index.d.ts`中,

    ```
    import storeAPI from 'electron-store'

    declare global {
    interface Window {
    store: storeAPI
    }
    }

    ```

    在 renderer 中用到 store 的地方:
    ```
    // @ts-ignore override warning
    const persistentStore = new window.store({ name: 'settings' })

    // 使用 persistentStore.get() 读数据
    // 使用 persistentStore.set() 写数据
    ```

    我自己对 typescript/electron 也是一知半解, 以上供参考。
    va3rrw
        13
    va3rrw  
       2023-06-30 16:25:27 +08:00
    个人认为 @musi 指出的方向是正确的,electron-store 是 main 进程的,在 renderer 进程里只能通过 preload 或者 ipc 访问。

    顺便问一下,手误发出的帖子没法删除或修改?似乎也不支持 markdown 语法?
    shalingye
        14
    shalingye  
       2023-07-01 12:29:26 +08:00
    看到最后一句 PS 稍微明白了,你可能没打包外部资源?
    "extraResources": [
    {
    "from": "./resources/appData/userData.json",
    "to": "./appData/userData.json"
    },
    ]
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2866 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:31 · PVG 20:31 · LAX 04:31 · JFK 07:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.