解决electron-vue build 后static/下资源无法加载问题

最新推荐文章于 2024-08-08 07:47:15 发布

younger_z

最新推荐文章于 2024-08-08 07:47:15 发布

阅读量5.8k

点赞数 1

分类专栏： electron

electron 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

electron-vue的界面渲染目录(src/renderer/),，使用的是和vue-cli基本一致的目录结构，static目录路径也和vue-cli一致。一般来说如果直接把原有的vue-cli项目下的src下的文件复制到src/renderer/下，再把static的内容也复制到static下，在webpack.renderer.config.js下像vue-cli里面一样,设置webpack的路径别名：
'static':path.resolve(__dirname, '../static')

再运行npm run dev 一般就可以看到原来vue-cli的项目了。
但是这样其实是运行了一个WebpackDevServer 然后electron界面显示了此devServer的页面，所以static目录下的文件可以正常加载。
如果运行npm run build后，会在build/目录下得到一个win-unpacked/文件夹且有一个****.exe的可安装运行文件，这时进入win-unpacked下运行****.exe就会发现有很多资源无法加载,还有可能直接显示白屏等等问题。

这就是这次咋们要解决的问题了，为什么dev的时候好好的,到了build就出问题了呢,我们看electron的官方文档就知道，原来在开发和产品阶段static的路径是不一致的，所以使用webpack配置的路径别名也就不能生效了。
所以官方提供了一个__static的全局变量，可以用来替代需要static/路径的地方，例如：

//vue-cli写法
b.style.background = 'url(static/bgimg/' + this.bgImgList[a] + ')'
//electron-vue写法
b.style.background = 'url(' + __static + '/bgimg/' + this.bgImgList[a] + ')'
1
2
3https://img-blog.csdn.net/2018083117300363?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzEwMzQ3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
4
1
2
3
4
这样再运行npm run build(有时候需要运行一下npm run build:clean进行清理)后打开.exe文件应该就能正确加载__static下的资源了。

如果dev或者web环境下__static变量解析不正确，只需要自行修改对应运行环境下的__static变量值就行了，例如dev环境下的__static应该改为：

//.electron-vue/webpack.renderer.config.js

if (process.env.NODE_ENV !== 'production') { //非最终产品环境,这里即为dev环境
rendererConfig.plugins.push(
new webpack.DefinePlugin({
// '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
'__static': JSON.stringify('./static')
})
)
}
---------------------
作者：weixin_43103477
来源：CSDN
原文：https://blog.csdn.net/weixin_43103477/article/details/82259381
版权声明：本文为博主原创文章，转载请附上博文链接！