解决electron-vue build 后static/下资源无法加载问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
由于electron实现原理为
chromium
+node.js
+electronAPI
,所以运行的时候是以chromium浏览器为操作界面,node提供服务,以及调用electron提供的系统API的软件。
electron-vue的界面渲染目录(src/renderer/),,使用的是和vue-cli基本一致的目录结构,static目录路径也和vue-cli一致。一般来说进行这几部操作:
- 直接把原有的vue-cli项目下的src下的文件复制到src/renderer/下;
- 把原项目static文件夹下的文件也复制到static下;
- 在
webpack.renderer.config.js
下,像vue-cli里面一样设置路径别名:'static':path.resolve(__dirname, '../static')
- 运行
npm run dev
就可以看到原来vue-cli的项目了。
但是这样预览,其实是运行了一个Webpack DevServer,然后electron界面显示了此devServer的页面,所以static目录下的文件可以正常加载。
但如果运行npm run build
后,在build/win-unpacked/
目录下运行****.exe就会发现有很多资源无法加载,还有可能直接显示白屏等等问题。
这就是这次咋们要解决的问题了,为什么dev的时候好好的,到了build就出问题了呢,我们看看electron的官方文档就知道,原来在开发和产品阶段static
的路径是不一致的,所以使用webpack配置的路径别名也就不能生效了。
这里官方贴心的提供了一个__static
的全局变量 (两个下划线开头),可以用来替代需要static
的地方,例如:
//vue-cli写法
b.style.background = 'url(static/bgimg/')'
//electron-vue写法
b.style.background = 'url(' + __static + '/bgimg/')'
这样再运行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')
})
)
}
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)