电容器离子 4 vue 项目 net::ERR_FILE_NOT_FOUND

Question

我使用 vue create 创建了新的 vue 项目，并根据以下教程添加了离子和电容器 vue ionic capacitor Tutorial

yarn add @capacitor/core @capacitor/cli
yarn cap init 
yarn cap add android/ios and electron

 update capacitor.config.json as follow


  {
   "appId": "xxxx.xxx.xxxx.vuecapacitordemo2",
   "appName": "vuecapacitordemo2",
    "bundledWebRuntime": true,
    "npmClient": "yarn",
    "webDir": "dist"
   }

我在运行ning electron, yarn 运行 electron:start 时遇到问题，我得到 net::ERR_FILE_NOT_FOUND 。谷歌搜索答案发现几个答案都导致添加具有以下内容的 link_1 link_2 link_3 vue.config.js 文件。具有不同的 publicPath

值

 module.exports={
      publicPath: '/',
      runtimeCompiler: true
 }

这会导致应用程序无法在启动画面后继续运行。 hint/idea 如何解决这个问题？

提前致谢

Answer 1

通过进行两项更改，我能够将我的电子应用程序无误地安装到运行。首先我添加了 (projectRoot)/vue.config.js

module.exports = {
  publicPath: './',
}

我还在 (projectRoot)/public/index.html

的 <head> 标签内添加了 <base href="./">

进行此更改后，确保构建 "npm run build"，然后 "npx cap copy" 以同步所有资产文件，然后测试 "cd electron & npm run electron:start"

作为参考，我遇到了类似于 GET file:///js/chunk-de72da5c.95253596.js net::ERR_FILE_NOT_FOUND 的错误。将更改添加到 vue.config.js 后，我注意到指向我的资产的链接具有我的应用程序目录的完整路径。

问题似乎与电子如何处理相对路径有关，因此您必须显式更改默认情况下 webpack 编译路径的方式。希望这有帮助。

电容器离子 4 vue 项目 net::ERR_FILE_NOT_FOUND

capacitor ionic 4 vue project net::ERR_FILE_NOT_FOUND

vue.js

ionic4

capacitor