ms webvieww2
的调用存在严重的问题!
webview2
, jdk17+
, node v18.17.1
基于 ms webview2
和 webview_java
桌面混合开发框架,嵌入 spring-boot
的 web
能力。
用 spring-bbot web
模块托管桌面UI。因此此方案的本质是 解决 vue
项目打包后整合到 spring-boot
中。
至于为什么要用 vue3
做UI,当然是因为原生 html
开发UI太难受了。
推荐 vite
+ vue3
,前端必须设置根路径,前端根路径很重要,spring-boot
根据此路径区分前端和后端。
建议直接使用 jpp-spring-example
,省去各种折腾。
如果手动创建前端项目, 参考 jpp-spring-boot-starter
, .env.**
文件中 VITE_FRONT_BASE
是前端根路径,参考此配置的用法。
- 创建路由时,设置前端根路径;
const basePath = import.meta.env.VITE_FRONT_BASE
const router = createRouter({
history: createWebHistory(basePath),
routes: [
//...
]
})
- 设置打包后的 url 根路径。
vite.config.ts
:
export default ({mode}) => {
const env = loadEnv(mode, process.cwd())
// 获取定义的前端根路径
let frontBase = env.VITE_FRONT_BASE
frontBase = frontBase ? frontBase : "/"
if(!frontBase.endsWith('/')) {
frontBase += "/"
}
return defineConfig({
// 如果在路由中设置了全局路径(VITE_FRONT_BASE),这个值必须保持一致
base: frontBase,
// 打包配置
build: {
outDir: '../src/main/resources/static/dist',
// ...
},
// others ...
})
}
导入依赖 pom.xml
<dependencies>
<dependency>
<groupId>cc.wanforme</groupId>
<artifactId>jpp-spring-boot-starter</artifactId>
<version>0.0.1</version>
</dependency>
<!-- region webview-java libs-->
<dependency>
<groupId>co.casterlabs.commons</groupId>
<artifactId>platform</artifactId>
<version>1.7.0</version>
</dependency>
<dependency>
<groupId>co.casterlabs.commons</groupId>
<artifactId>io</artifactId>
<version>1.7.0</version>
</dependency>
<dependency>
<groupId>co.casterlabs.commons</groupId>
<artifactId>async</artifactId>
<version>1.7.0</version>
</dependency>
<dependency>
<groupId>co.casterlabs</groupId>
<artifactId>rson</artifactId>
<version>1.17.9</version>
</dependency>
<dependency>
<groupId>net.java.dev.jna</groupId>
<artifactId>jna</artifactId>
<version>5.14.0</version>
</dependency>
<dependency>
<groupId>net.java.dev.jna</groupId>
<artifactId>jna-platform</artifactId>
<version>5.14.0</version>
</dependency>
<!-- endregion -->
</dependencies>
应用配置
jpp-ms-webview:
# 自定义 ErrorViewResolver
custom-error-resolver: false
# 前端 url 根路径, 对应前端 VITE_FRONT_BASE
front-base-url: /jpp
# 前端打包文件位置 (/src/main/resources/static/dist/)
front-base-dir: /dist
# 前端主文件 /src/main/resources/static/dist/index.html
front-index-html: ${jpp-ms-webview.front-base-dir}/index.html
# 前端首页url
front-index-url: ${jpp-ms-webview.front-base-url}/index
关于 jpp-ms-webview.front-index-url
需要说明的是,上面的配置是打包后的配置,开发时填写前端 vite
启动的地址
jpp-ms-webview:
# ...
# 前端首页url
# after package build ; 前端打包后
#front-index-url: ${jpp-ms-webview.front-base-url}/index
# development ;开发环境
front-index-url: http://localhost:8042${jpp-ms-webview.front-base-url}/index
程序打包后,运行前需要安装 webview2
和 jdk
webview2
在微软官网上可以下载 windows
版本的(win11系统自带,不需要手动安装)。 下载 download
*nix
系统参考 webview2
附 ms webview2
+ spring-boot
+ javaFX
+ vue3
开发的桌面小应用 hi-there