H5离线化开发技术文档-五八三

系统架构

本项目基于Vue.js进行开发，结构清晰、模块化，并使用了Vite作为构建工具。在路由方面，我们使用vue-router。为了实现API调用，我们使用axios作为HTTP客户端。

在本次离线资源包开发中，我们的目标是使H5应用在无网络的环境下也能正常运行，这需要我们对项目的静态资源路径、路由方式、请求处理等多个方面进行修改。

一、Vite.config.js 文件修改说明

1. 改动点：

修改了base配置，其中使用了一个getCdn()函数，根据环境变量返回不同的base值。

function getCdn() {
  if (process.env.VITE_APP_PLATFORM === 'app' || !env) {
    return './';
  }

  const env = process.env.yw_env;
  let base = './';

  if (['uat', 'test', 'pre', 'pro'].includes(env)) {
    switch (env) {

      case 'uat':

      case 'test':

        base = 'https://';
        break;

      case 'pre':

        base = 'https://';
        break;

      case 'pro':

        base = 'https://';
        break;

    }

  }


  return base;
}

export default defineConfig({
  base: getCdn(),
  //...其他配置项
});

2. 原理：

Vite的base配置用于处理静态资源的路径问题。在离线应用（App环境）中，我们需要将静态资源打包到应用本地，这时候base需要设置为’./’，表示资源路径为相对路径。

3. 解决的问题：

对于App环境，我们需要加载打包到本地的静态资源，通过修改base为’./’，我们可以实现这个需求。同时，对于其他环境（如uat、test、pre、pro），我们还是使用对应环境的CDN地址作为base。

4. 存在的问题：

如果环境变量配置错误，或者CDN地址变更，可能会导致静态资源加载失败。

5. 解决方案：

需要在环境部署和维护时，确保环境变量的正确配置，以及CDN地址的正确性。

二、router.js 文件修改说明

1. 改动点：

修改了createRouter中history的配置，根据环境变量选择不同的history模式。




export const router = createRouter({
  history: import.meta.env.VITE_APP_PLATFORM === 'app'
    ? createWebHashHistory('/authorh5')
    : createWebHistory('/authorh5'),
  //...其他配置项
});

2. 原理：

Vue Router提供了两种模式：’hash’和’history’，分别对应createWebHashHistory和createWebHistory函数。在App环境下，由于是离线应用，我们采用’hash’模式，可以避免404问题。

3. 解决的问题：

在离线应用中，我们需要避免用户在使用应用时出现404页面，因此选择’hash’模式。这种模式下，应用的所有路由都会映射到index.html，避免了服务器配置问题。

4. 存在的问题：

‘hash’模式的URL包含’#’，在某些情况下可能对SEO产生影响。

5. 解决方案：

对于App环境，这不是一个问题，因为不需要考虑SEO。对于需要考虑SEO的环境，我们仍然使用’history’模式。

三、httphost.js 文件修改说明

1. 改动点：

我们修改了网络请求的URL，将其从相对路径改为绝对路径。具体实现为，在网络请求发出之前，检查是否在APP环境中，如果是，则根据当前环境从预设的几个URL中选择一个作为请求的前缀，与原请求URL进行拼接，得到新的请求URL。




export const _fetch = (
  url: string,
) => {
  let finalUrl = `${url}`;
  const proxy = getProxy();
  if (proxy.length > 0) {
    finalUrl = `${proxy}${url}`;
  }
  //...请求处理
};

getProxy()的实现：




export const getProxy = function () {
  if (import.meta.env.VITE_APP_PLATFORM !== 'app') {
    return '';
  }

  let base = 'https://pcwrite.yuewen.com';
  const env = import.meta.env.MODE;
  if (['uat', 'test', 'pre', 'pro'].includes(env)) {
    switch (env) {

      case 'uat':

      case 'test':

        base = 'https://';
        break;

      case 'pre':

        base = 'https://';
        break;

      case 'pro':

        base = 'https://';
        break;

    }

  }

  return base;
};

2. 原理：

在发送请求时，我们通过检查是否在App环境中（import.meta.env.VITE_APP_PLATFORM !== 'app'），如果是，则进一步通过检查环境变量（import.meta.env.MODE）来选择请求的前缀，即URL的协议、主机和端口部分，然后将这个前缀与原请求URL进行拼接，得到新的请求URL。这样，我们在离线包环境中发送的请求URL就是完整的绝对路径了。