如何在.NET MAUI Android的WebView中加载Vue3项目构建文件

步骤1：调整Vue项目的Vite配置 #

Vite默认构建的资源引用是绝对路径，需改为相对路径才能在本地WebView中正确加载：
在项目根目录的vite.config.js中修改base配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './' // 改为相对路径
})

步骤2：构建Vue项目 #

运行构建命令生成完整静态资源：

npm run build

构建完成后，项目根目录会生成dist文件夹，包含index.html、assets等所有静态文件。

步骤3：将静态资源导入MAUI项目 #

• 在.NET MAUI项目中新建文件夹（例如命名为wwwroot），将dist内的所有文件复制到该文件夹。
• 选中wwwroot下的所有文件，在属性面板设置：
  • 生成操作：MauiAsset
  • 复制到输出目录：如果较新则复制

步骤4：配置MAUI WebView加载本地资源 #

替换原有WebView配置，使用UrlWebViewSource加载本地index.html，同时启用必要的WebView设置：

<WebView x:Name="vueWebView" 
         HeightRequest="MatchParent" 
         WidthRequest="MatchParent">
    <WebView.Source>
        <UrlWebViewSource Url="file:///android_asset/wwwroot/index.html" />
    </WebView.Source>
    <WebView.WebViewPreferences>
        <WebViewPreferences JavaScriptEnabled="True" 
                            AllowFileAccess="True"
                            AllowContentAccess="True" />
    </WebView.WebViewPreferences>
</WebView>

额外注意事项 #

• Vue路由模式：若使用history路由模式，本地WebView会出现跳转404问题，建议改为hash模式（Vue3中在路由配置里使用createWebHashHistory()）。
• 内容安全策略（CSP）：若出现脚本/样式被拦截，可修改index.html中的CSP meta标签，允许本地资源加载：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';">
  

• Android权限：若项目涉及网络请求，需在AndroidManifest.xml中添加INTERNET权限，本地文件加载无需额外权限。

内容的提问来源于stack exchange，提问作者Invix