import { fileURLToPath, URL } from 'url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// 将 px 转换为 vw
import 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', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: 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="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
 
    <WebView
        android: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 {
 
    @Override
    protected 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="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.myapplication">
 
    <application
        android: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">
        <activity
            android: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 / 工作记录专栏里

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^