由于 MSAppHost 是系统组件所以只用打包 Web 资源就行了。WinJS 曾作为 WSA (Windows Store App) 的主推平台甚至 Win8 应用商店都是 JS/HTML 开发的不过在进入 Win10 之后有了 .NET Native 的加持C#/UWP 逐渐变为主流MSAppHost 基本上只剩下了作为 PWA 的用途。然而随着 Edge HTML 的停更Windows 再也没有了原生的 HTML 渲染平台微软也在 VS 2019 中彻底删除了对 WinJS 的支持。不过 MSAppHost 框架作为系统组件并没有被删除利用 electron-windows-msix 插件我们可以轻松打包一个 NPM 项目我们只需要将清单改为 MSAppHost 模式即可。接下来我们将演示如何新建一个 Vue/UWP 项目。首先我们根据 Vue 官方教程新建一个空白 Vue 项目npm create vuelatest进入项目文件夹后安装依赖npm i然后我们测试一下它是否可以正常运行npm run dev由于 MSAppHost 永远留在了 Edge HTML 18所以我们需要把 JS 编译到 Edge 18 兼容的版本安装 vitejs/plugin-legacynpm i --save-dev vitejs/plugin-legacy在vite.config.ts配置插件由于vite使用到了新版 ESM 模块特性所以 Edge 只能使用 Legacy 模式注意base一定要设置为./因为打包插件会把编译结果打包进app文件夹import legacy from vitejs/plugin-legacy...export default defineConfig({base: ./,plugins: [...legacy({targets: Edge 18,polyfills: true,renderModernChunks: false})],...})验证可以正常运行后我们安装 electron-windows-msix 插件npm i --save-dev electron-windows-msix然后编写打包脚本可以参考 package.mjsimport { packageMSIX } from electron-windows-msix;/** type {import(electron-windows-msix).WindowsSignOptions} */let windowsSignOptions undefined;const certificateFileIndex process.argv.indexOf(--certificateFile);if (certificateFileIndex ! -1) {windowsSignOptions {certificateFile: process.argv[certificateFileIndex 1]};const certificatePasswordIndex process.argv.indexOf(--certificatePassword);if (certificatePasswordIndex ! -1) {windowsSignOptions.certificatePassword process.argv[certificatePasswordIndex 1];}const timestampServerIndex process.argv.indexOf(--timestampServer);if (timestampServerIndex ! -1) {windowsSignOptions.timestampServer process.argv[timestampServerIndex 1];}}const { msixPackage } await packageMSIX({appManifest: AppxManifest.xml,appDir: dist,packageAssets: assets,outputDir: appx,packageName: VueForUWP.msix,windowsKitVersion: 10.0.26100.0,windowsSignOptions,sign: !!windowsSignOptions});console.log(MSIX package created at: ${msixPackage});其中appManifest是 Appx 清单的路径appDir是vite编译结果文件夹packageAssets是 Appx 资源文件夹如果不设置会使用插件默认的资源下面的 Appx 清单使用的就是默认资源windowsKitVersion需要选择已安装的 Windows SDK 版本。由于默认清单是 FullTrust Win32 打包项目所以我们需要手动编写清单新建 AppxManifest.xml 文件?xml version1.0 encodingutf-8?Packagexmlnshttp://schemas.microsoft.com/appx/manifest/foundation/windows10xmlns:mphttp://schemas.microsoft.com/appx/2014/phone/manifestxmlns:uaphttp://schemas.microsoft.com/appx/manifest/uap/windows10xmlns:uap5http://schemas.microsoft.com/appx/manifest/uap/windows10/5IgnorableNamespacesuap uap5 mpIdentity Namewherewhere.VueForUWPPublisherCNwhereVersion0.0.1.0 /mp:PhoneIdentity PhoneProductId2d5eb3c5-2697-7f48-4085-ba24fba35ad1PhonePublisherId00000000-0000-0000-0000-000000000000 /PropertiesDisplayNameVueForUWP/DisplayNamePublisherDisplayNamewherewhere/PublisherDisplayNameLogoassets\icon.png/Logo/PropertiesDependenciesTargetDeviceFamily NameWindows.Universal MinVersion10.0.18362.0MaxVersionTested10.0.26100.0 //DependenciesResourcesResource Languageen-us //ResourcesApplicationsApplication IdVueForUWP StartPagems-appx-web:///app/index.htmluap:VisualElementsDisplayNameVueForUWPDescriptionUWP running with vue.js 3.0BackgroundColortransparentSquare150x150Logoassets\Square150x150Logo.pngSquare44x44Logoassets\Square44x44Logo.pnguap:DefaultTileWide310x150Logoassets\Wide310x150Logo.scale-200.pnguap:ShowNameOnTilesuap:ShowOn Tilesquare150x150Logo //uap:ShowNameOnTiles/uap:DefaultTileuap:SplashScreen Imageassets\SplashScreen.scale-200.png uap5:Optionaltrue /uap:InitialRotationPreferenceuap:Rotation Preferencelandscape /uap:Rotation Preferenceportrait /uap:Rotation PreferencelandscapeFlipped /uap:Rotation PreferenceportraitFlipped //uap:InitialRotationPreference/uap:VisualElementsuap:ApplicationContentUriRulesuap:Rule Matchms-appx-web:/// Typeinclude WindowsRuntimeAccessall //uap:ApplicationContentUriRules/Application/ApplicationsCapabilitiesCapability NameinternetClient //Capabilities/Package然后编写部署脚本可以参考 deploy.mjsimport { powershell } from electron-windows-msix/lib/powershell.js;const results await powershell(Add-AppxPackage -Path appx/msix_layout/AppxManifest.xml -Register);console.log(results);最后在package.json中添加打包和部署指令{...scripts: {...pack: npm run build node package.mjs,deploy: node deploy.mjs},...}现在我们可以通过执行npm run pack打包项目用npm run deploy部署项目了。由于 MSAppHost 永远留在了 Edge HTML 18所以新的 Vue 样式库基本上都无法使用为了符合 Windows 样式还是建议使用 WinJS 控件库可以在这里找到示例GitHub - wherewhere/VueForUWP: UWP running with vue.js 3.0 · GitHub