问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

electron 如何解决路径问题

头像
sy0wxvu0
    416
    新手上路，请多包涵

    electron 的 index.html文件中加入资源引用，比如src="/assets/index.f2932f37.js"就会到磁盘根目录中获取D:\assets\index.f2932f37.js，怎么指定到.html文件所在的目录去查找，类似'/assets/index.f2932f37.js'？也就是如何指定根目录？

    function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('./dist/index.html')
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  <script type="module" crossorigin src="/assets/index.f2932f37.js"></script>
  <link rel="modulepreload" href="/assets/vendor.a5e6f6e0.js">
  <link rel="stylesheet" href="/assets/index.3714cd5a.css">
</head>
  <body>
    <div id="app"></div>
    
  </body>
</html>
    electron
    阅读 13.1k
    5 个回答
    得票最新
    头像
    Villee_
      1.3k1315

      看一下 'preload.js'的路径，参考这个路径的书写方式：
      win.loadFile(path.join(__dirname, 'index.html'))

      你可以看一下打包之后的 index.html 和 preload.js是不是在同级目录，如果不是就按照他们的相对路径调整一下

      头像
      summer_Lin
        9521727

        /assets/index.f2932f37.js

        html引入的资源使用了绝对路径, 你用相对路径调整一下试试

        头像
        xdsnet
          7.6k3527

          一般在项目中都是使用相对路径的，特别是html文件中，最好采用./assets/XXXX这样的相对路径写法，这样不容易出错。

          头像
          Sky_miao
            22
            新手上路，请多包涵

            您好，我理解您的问题跟我遇到的一致：
            打包后访问时，index.html的网络请求地址是对的，但是下面的js\css请求地址不对，该怎么配置啊？

            您有解了吗？可以分享一下吗？

            头像
            ST大政
              2
              新手上路，请多包涵

              正确的解决思路是把打包的src="/assets/index.f2932f37.js"这样的绝对路径，打包成src="./assets/index.f2932f37.js"这样的相对路径。

              这取决于你的打包工具。如果你是vue+vite工程，那就是在vite.config.ts（如果你没有使用typescript，那就是vite.config.js）里增加 base字段，这样打出来的包就是src="./assets/index.f2932f37.js"这样的了。如下图：

              import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: "./",
})

              如果你是其它工程类型，比如rect+webpack或vue+webpack，也是设置相应的设置项即可（如何设置可以去网上搜索或查看相对应的官方文档）。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题