目录
1. 使用 vw/vh 适配移动端
1.1 使用 vite 初始化项目
1.2 安装插件，将 px 转化成 vw
1.2.1 在 vite.config.ts 中，声明插件
1.2.2 手写 postcss 类型声明文件，解决路径爆红、没有提示
1.2.3 tsconfig.config.json VS tsconfig.json
2. 将 vue 项目丢到 Android app 中
2.1 创建 Android app
2.2 Android app 目录结构
2.3创建并启动虚拟机
2.4 修改布局 activity_main.xml
2.5 修改主任务逻辑 MainActivity
2.6 解决运行时网络连接失败的问题
2.7 打包项目（debug 包）
1. 使用 vw/vh 适配移动端
开发移动端，最麻烦的一点就是适配不同尺寸的屏幕
之前自适应，采用 rem / 百分比 / 媒体查询 等方式实现，现在可以采用 vm/vh 方案：
vw —— 视口的最大宽度，1vw 等于视口宽度的百分之一vh —— 视口的最大高度，1vh 等于视口高度的百分之一
1.1 使用 vite 初始化项目
npm init vue@latest
如果有报错信息：error when starting dev server: Error: Cannot find module 'node:path'
解决方案：
升级 node.js 至16常见的版本是12、14、16，一般使用大版本中的最新版本
1.2 安装插件，将 px 转化成 vw
npm install postcss-px-to-viewport -D
1.2.1 在 vite.config.ts 中，声明插件
安装完成后，直接修改 vite.config.ts，声明插件（由于 vite 中已经内联了 postcss，所以无需创建 postcss.config.js文件来声明插件）
import { fileURLToPath, URL } from 'url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'// 将 px 转换为 vwimport postcsspxtoviewport from "postcss-px-to-viewport"export default defineConfig({plugins: [vue(), vueJsx()],css: {postcss: {plugins: [postcsspxtoviewport({unitToConvert: 'px', // 要转化的单位viewportWidth: 750, // UI设计稿的宽度，一般写 320// 下面的不常用，上面的常用unitPrecision: 6, // 转换后的精度，即小数点位数propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vwfontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值landscape: false // 是否处理横屏情况})]}},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}})
注意：直接从postcss-px-to-viewport 依赖中读取内容，路径会爆红，并且 postcsspxtoviewport 中也没有智能提示，这是因为缺少声明文件
如何解决 路径爆红、没有提示 这两个问题呢？根据提示，得到两种方案：
使用命令下载 postcss 的声明文件自己写一个 postcss 的声明文件
如果使用命令下载 postcss 声明文件，则会出现报错（当前社区内没有 ts 声明文件）
所以还是手写一个 postcss 声明文件吧 ——postcss-px-to-viewport.d.ts
1.2.2 手写 postcss 类型声明文件，解决路径爆红、没有提示
通过declare module 'postcss-px-to-viewport' 给 postcss 扩充声明
declare module 'postcss-px-to-viewport' {type Options = {unitToConvert: 'px' | 'rem' | 'cm' | 'em',viewportWidth: number,// 下面的不常用，上面的常用viewportHeight: number, // 目前未使用；TODO:需要不同的单位和不同属性的数学unitPrecision: number,viewportUnit: string,fontViewportUnit: string, // vmin更适合selectorBlackList: string[],propList: string[],minPixelValue: number,mediaQuery: boolean,replace: boolean,landscape: boolean,landscapeUnit: string,landscapeWidth: number}// 注意：这里导出一个函数，如果使用箭头函数容易报错，推荐使用 function 这种写法export default function(options: Partial<Options>):any}
类型声明文件注意问题：
类型声明文件，最终导出一个函数如果使用箭头函数容易报错，推荐使用 function 这种写法Partial 可以让 ts 中的属性全部变成可选项（非必填项）
1.2.3 tsconfig.config.json VS tsconfig.json
这俩文件是有区别的：
tsconfig.config.json —— 用于配置 vite 需要的各种工具tsconfig.json —— 用于配置 Vue 需要的各种工具
postcss 是针对 vite 的工具，因此要在tsconfig.config.json 中引入 1.2.2 手写的声明文件
{"extends": "@vue/tsconfig/tsconfig.web.json","include": ["env.d.ts", "src/**/*", "src/**/*.vue", "postcss-px-to-viewport.d.ts"],"exclude": ["src/**/__tests__/*"],"compilerOptions": {"composite": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]}}}
这样就配置完成了：
在项目里，我们会继续用 px 写代码运行后，浏览器样式则会被自动改成 vw
2. 将 vue 项目丢到 Android app 中
2.1 创建 Android app
打开 Android Studio 后，会弹出这个界面，选择 Empty Activity
如果之前开启过别的项目，也可以通过下面的路径，重新打开上面的弹框
选择 Empty Activity 后，会出现下面的弹框，给项目起个好听的名字
点击 Finish，会开始初始化一个Android 项目，最终如下所示：
左侧是 Android app 源码顶部有个启动 app 的按钮，还有个创建虚拟机的按钮
2.2 Android app 目录结构
2.3创建并启动虚拟机
可以创建多个虚拟机
启动虚拟机，并让当前 Android app 运行
2.4 修改布局 activity_main.xml
先把 图形化编辑模式 切换成 代码编辑模式
添加一个类似于前端 display:flex 概念的线性布局 LinearLayout
再添加一个 WebView 容器，用于容纳网页
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:orientation="vertical"android:layout_height="match_parent"><WebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout >
2.5 修改主任务逻辑 MainActivity
隐藏默认头部
import android.app.Activity;
public class MainActivity extends Activity { ... }
设置 WebView 属性，使他能够执行 Javascript 脚本
view.getSettings().setJavaScriptEnabled(true);
加载需要显示的网页（也就是正在运行的 vue 应用）：
不能使用局域网地址，只能虚拟机专属地址 http://10.0.2.2端口是 vue 项目运行端口（启动 app 的同时，也要启动 vue 项目）
最终代码如下：
package com.example.myapplication;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.webkit.WebView;// 隐藏默认头部import android.app.Activity;import android.webkit.WebViewClient;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 设置一个 Activity 的显示界面，setContentView(R.layout.activity_main);// 这句类似 js 中的 document.querySelector()WebView view = (WebView)findViewById(R.id.web_view);// 设置 WebView 属性，使他能够执行 Javascript 脚本view.getSettings().setJavaScriptEnabled(true);// 加载需要显示的网页// 不能使用局域网地址，只能虚拟机专属地址 http://10.0.2.2// 端口是 vue 项目运行端口（就是启动 app 的同时，也要启动 vue 项目）view.loadUrl("http://10.0.2.2:3000");view.setWebViewClient(new WebViewClient());}}
2.6 解决运行时网络连接失败的问题
完成上面的修改后，点击右上角的运行按钮，在虚拟机里重启项目，会发现 —— 网络连接失败
这时候需要去主入口文件 AndroidManifest.xml里，增加一些权限配置
增加了 4 行代码，如下所示：
完整代码：
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="/apk/res/android"xmlns:tools="/tools"package="com.example.myapplication"><applicationandroid:allowBackup="true"android:dataExtractionRules="@xml/data_extraction_rules"android:fullBackupContent="@xml/backup_rules"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/Theme.MyApplication"android:usesCleartextTraffic="true"tools:targetApi="31"><activityandroid:name=".MainActivity"android:exported="true"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /></manifest>
这样，就能顺利预览本地运行的项目了
2.7 打包项目（debug 包）
打包项目时，需要把 2.5 中的路径，改成线上地址
打包项目，可以参考我的其他文章，在 capacitor / 工作记录 专栏里
