项目初始化

html配置

<!-- html页面设置不缓存 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- 禁止识别电话号码 -->
    <meta name="format-detection" content="telephone=no" />
    <!--忽略电话号码和email识别-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--隐藏ios上的浏览器地址栏-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- UC默认竖屏 ，UC强制全屏 -->
    <meta name="full-screen" content="yes" />
    <meta name="browsermode" content="application" />
    <!-- QQ强制竖屏 QQ强制全屏 -->
    <meta name="x5-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="x5-page-mode" content="app" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui, viewport-fit=cover"
    />

移动端适配

autoprefixer

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，

postcss-pxtorem

使用rem实现适配方案

使用方法

vite.config.ts

import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
    css: {
        postcss: {
          plugins: [autoprefixer(), postCssPxToRem({
            rootValue: 75,// 要转化的单位
            propList: ["*"], // UI设计稿的宽度
            minPixelValue: 2, // 最小的转换数值
            exclude: "/node_modules/i",
            mediaQuery: true
          })]
        }
  }
})

存在的问题：

不能控制最大可收缩范围

postcss-px-to-viewport

使用方法

vite.config.ts

import autoprefixer from 'autoprefixer';
import postcssPxToViewport from 'postcss-px-to-viewport';
export default defineConfig({
    css: {
        postcss: {
          plugins: [autoprefixer(), postcssPxToViewport({
            unitToConvert: "px",// 要转化的单位
            viewportWidth: 750,// UI设计稿的宽度
            unitPrecision: 3,// 转换后的精度，即小数点位数
            propList: ["*"],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw",// 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw",// 指定字体需要转换成的视窗单位，默认vw
            landscapeUnit: 'vh',// 横屏时使用的单位
            landscapeWidth: 750,// 横屏时使用的视口宽度
            selectorBlackList: [],// 指定不转换为视窗单位的类名
            minPixelValue: 2,// 默认值1，小于或等于1px则不进行转换
            mediaQuery: false,// 是否在媒体查询的css代码中也进行转换，默认false
            replace: true,// 是否转换后直接更换属性值
            // landscape: false, // 是否处理横屏情况
            exclude: [/node_modules/i, /auth/]
          })]
        }
  }
})

存在的问题：

不能控制最大可收缩范围

使用postcss-px-to-viewport 会遇到ts问题

需要新建typing.d.ts文件在项目根目录下


declare module 'postcss-px-to-viewport' {
  export default function (options: any): any;
}

在tsconfig.app.json 来自于文章

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "typings.d.ts", "postcss.config.ts", "extendProperties.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

axios

安装axios

新建axios.ts

import axios from 'axios'

const API_URL = import.meta.env.VITE_API_URL
const config = {
  timeout: 100000,
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
}

const ajax = axios.create(config);

// 请求拦截器 (在发送请求之前)
ajax.interceptors.request.use((res) => {
  if (res.method === 'post') {
    console.log(res.data)
  } else if (res.method === 'get') {
    console.log('get请求')
  }

  return res
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
ajax.interceptors.response.use((res) => {
  if (res.data.code === 10001) {
    alert('非法请求，缺少系统级参数')
  }
  return res
}, (error) => {
  if (error.response) {
    console.log(error)
  }
  return Promise.reject(error)
})


export default ajax

引入axios时会报ts错误需要安装 @types/axios --save-dev

通过script标签引入sdk

dist/index.html


script src="https://accounts.google.com/gsi/client" async defer></script>

全局使用时需要在main.ts做ts声明

declare global {
  interface Window {
    FB: any,
    google: any
  }
}

页面就可以直接使用FB对象

vue3+vite5+ts5搭建移动端项目