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

水深无声 2022-02-03 20:13 1466阅读 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  
3[https://img-blog.csdn.net/2018083117300363?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzEwMzQ3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70][https_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  
版权声明：本文为博主原创文章，转载请附上博文链接！

[https_img-blog.csdn.net_2018083117300363_watermark_2_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzEwMzQ3Nw_font_5a6L5L2T_fontsize_400_fill_I0JBQkFCMA_dissolve_70]: https://img-blog.csdn.net/2018083117300363?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzEwMzQ3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70