vite 全局追加loading

原创已于 2024-02-28 09:00:28 修改 · 982 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #linux

于 2024-02-27 16:47:31 首次发布

本文介绍了如何使用Vite开发环境中创建一个名为insert-loading的插件，该插件会在Vue组件中动态插入loading效果。同时处理了文件路径的规范化和uni-app的兼容性问题。

import * as fs from 'node:fs';
import path from 'node:path';

import normallize from 'normalize-path';
import type { PluginOption } from 'vite';
import { defaultPagesRE } from './app-provider'

export default function insertLoading() {
  const template = fs.readFileSync(normalizePagePathFromBase('./src/layout/AppProvider.vue'), 'utf-8');
  return <PluginOption>{
    name: 'insert-loading',
    transform(code, id) {
      id = normalizePagePathFromBase(id);
      const regResult = defaultPagesRE.exec(id);
      if (regResult) {
        const oldTemplate = /<template>([\s\S]*)<\/template>/.exec(code);
        const tempString = oldTemplate != null ? oldTemplate[1] : '';
        const newTemplate = template.replace('<!-- template -->', tempString as string);
        code = code.replace(/<template>([\s\S]*)<\/template>/, newTemplate);
      }
      return code;
    },
  };
  function normalizePagePathFromBase(file: string) {
    return normallize(path.relative(process.cwd(), file));
  }
}

<template>
  <view>
    <LoadingPage></LoadingPage>
    <!-- template -->
  </view>
</template>

注意追加的插件在uni之前

plugins: [
    AutoImportTypes(),
    PiniaAutoRefs(),
    AutoImport({
      dts: 'src/auto-imports.d.ts',
      imports: [
        'vue',
        'uni-app',
        'pinia',
        {
          '@/helper/pinia-auto-refs': ['useStore'],
        },
      ],
      exclude: ['createApp'],
      eslintrc: {
        enabled: true,
      },
    }),
    Components({
      extensions: ['vue'],
      dts: 'src/components.d.ts',
    }),
    // 上面写的插件
    insertLoading(),
    // uni支持(兼容性写法，当type为module时，必须要这样写)
    (uniPlugin as any).default(),
    Unocss(),
  ],