Vue3搭建微信H5的项目配置【前端】

在真实上线的项目中，写UI花费的时间仅仅是一小部分，项目的一些配置才真的头疼（如设备适配等）。这里小结一下我自己用vue3写微信H5中的一些配置：

一、项目结构

src
- api
- assets
  - font
  - img
    - view1专用文件夹
    - imgUrl.ts 用require()导出所用图片url，用于实现图片预加载
- components：存放多个页面通用的组件
- composables
  - view1专用文件，存放该页面用到的hooks，分离视图和业务
- router：路由
- store：数据仓库，如vuex，或简单的 reactive({})
- tools：工具函数
- types：类型定义
- views：页面
App.vue
define.d.ts
main.ts

二、适配

1、布局适配

之后会用一篇博客来总结。

2、插件适配

1）html2cavas：将DOM元素转化成图片的库

注意某些版本的ios可能对高版本html2canvas可能不兼容，出现生成空白图片的情况。应使用老版本：

① 先删除html2canvas。包括node_modules文件夹、pakage.lock等。

② 安装旧版：

yarn add html2canvas@1.0.0-rc.4

③ 此外还可能有其他问题，如ios 15以上可能因为字体bug导致生成空白图。在 APP.vue 中加入如下样式试试：

<style>
.html,
.body {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;
}

</style>

三、安全

1、去掉生产环境的console：

// 变量 process.env.VUE_APP_TARGET 的名字取决于构建工具（如drone）的配置
const IS_PROD = ['promote', 'rollback'].includes(process.env.VUE_APP_TARGET);

export function configConsole() {
  if (!IS_PROD) return;
  else {
    // @ts-ignore
    window.console.log = function () {};
    window.console.error = function () {};
    window.console.info = function () {};
  }
}

2、如何去掉url中的参数而不刷新页面：

import { useRouter } from 'vue-router';

setup() {
  const router = useRouter();
  router.replace({ query: {} });
}

3、阻止直接进入子页面

在 router/index.ts 中加入路由守卫：

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.name != 'Home' && !store.openId) next({ name: 'Home' });
  else next();
});

四、优化

1、资源预加载

见这篇博客。

五、网络

1、api

1）封装axios：src/api/config.ts

import apiLogger from '@/tools/apiLogger';
import { API_DOMAIN } from '@/tools/env';
import axios, { Method } from 'axios';
import { IResponse } from './types';

interface RequestConfig {
  method: Method;
  path: string;
  body?: unknown;
  headers?: Record<string, string | number | boolean>;
}

function request<T extends IResponse>(config: RequestConfig) {
  const { method, path, headers, body } = config;

  return new Promise((resolve, reject) => {
    axios
      .request<T>({
        method,
        url: API_DOMAIN + path,
        data: body,
        headers,
      })
      .then((res) => {
        if (res.data.code === 200) {
          const resData = res.data.data;
          apiLogger.success(path, resData);
          resolve(resData);
        } else {
          throw new Error(res.data.msg || '');
        }
      })
      .catch((err) => {
        apiLogger.error(path, err);
        reject(err);
      });
  });
}

export default request;

2）定义api：src/api/grade/commit.ts

import { IRecord } from '@/types';
import request from '../config';

interface IResponse {
  code: number;
  msg: null | string;
  data: unknown;
}

interface CommitGradeRes extends IResponse {
  data: IRecord;
}

export async function commitGrade(openId: string, answers: number[]) {
  const path = '/grade/commit';
  const data = await request<CommitGradeRes>({
    method: 'POST',
    path,
    body: answers,
    headers: { openId },
  });
  return data as IRecord;
}

3）导出api： src/api/index.ts

import { commitGrade, getList, getGradeById } from './grade';
import { getUserCount } from './user';

export const api = {
  grade: {
    commitGrade,
    getList,
    getGradeById,
  },
  user: {
    getUserCount,
  },
};

4）使用api：

import { api } from "../api";

api.grade.commit(openId, answers);

2、跨域

1）生产环境中，直接让后端配好跨域即可，前端啥都不用干，正常请求即可。

2）开发环境中，后端还没配好跨域，可在根目录新建 vue.config.js 文件：

module.exports = {
  devServer: {
    proxy: {
      // api中的path不需要写域名，直接用 /api 开头即可。
      // 浏览器找不到域名，会先把请求转发到node服务器。node尝试将本机的域名加在前面形成①并发出请求。
      // 若①不存在，则将下面的 target 加在前面，并重新发出请求。
      // 注：此时 F12 Network 看到的url并不是实际请求的url。实际url是经过上述规则拼接出来的。
      '/api': {
        target: 'https://dev.h5-nju.xyqq.fun', // 后端域名，自动加在"/api"前作为域名。
        changeOrigin: true,
      },
    },
  },
};