DEV Community

programmer lld
programmer lld

Posted on

vite-plugin-html和vite-plugin-static-copy 一起使用有bug

publicDir: VITE_APP_ENV === "production" ? false :"public",
plugins: createVitePlugins(env, command === "build",views),

import vue from "@vitejs/plugin-vue";
import createPublicFilter from './filter-public';
import createEditHtml from './edit-html'

export default function createVitePlugins(viteEnv, isBuild = false, buildList) {
  const vitePlugins = [vue()];
  vitePlugins.push(createEditHtml(viteEnv));
  isBuild && vitePlugins.push(createPublicFilter(viteEnv));
  return vitePlugins;
}


Enter fullscreen mode Exit fullscreen mode
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { publics, getConfigByKey } from '../config/system'

export default function createPublicFilter(env) {
  const { VITE_BUILD_PROJECT } = env
  const systemPublics = getConfigByKey(publics,VITE_BUILD_PROJECT);
  return  viteStaticCopy({
    targets: systemPublics
  })
}

import { createHtmlPlugin } from 'vite-plugin-html';
import { html, getConfigByKey } from '../config/html'

export default function createEditHtml(env) {
  const { VITE_BUILD_PROJECT } = env
  const systemHtml = getConfigByKey(html,VITE_BUILD_PROJECT);
  return  createHtmlPlugin(systemHtml)
}
Enter fullscreen mode Exit fullscreen mode
//index.html 文件配置
const defaultHtml = {
  minify: true,
};

const html = {
  license: {
    inject: {
      data: {
        injectScript :`  <script src="/drag/js/jquery.min.js"></script>
  <script src="/drag/js/draggabilly.pkgd.min.js"></script>`
      },
    }
  },
};

function getConfigByKey(routers, projectKey) {
  if (!routers || typeof routers !== "object" || Array.isArray(routers)) {
    return { ...defaultHtml };
  }
  if (typeof projectKey !== "string" || projectKey.trim() === "") {
    return { ...defaultHtml };
  }
  const normalizedKey = projectKey.trim().toLowerCase();
  const baseConfig = { ...defaultHtml };
  if (routers.hasOwnProperty(normalizedKey)) {
    const projectConfig = routers[normalizedKey];
    return {
      ...baseConfig,
      ...projectConfig,
      inject: {
        ...baseConfig.inject,
        ...projectConfig.inject,
      },
    };
  }
  return baseConfig;
}

export { html, getConfigByKey };


// public 是否打包配置
const defaultKey = [
  {
    src: "public/html",
    dest: "",
  },
  {
    src: "public/favicon.ico",
    dest: "",
  },
];

const publics = {
  license: [
    {
      src: "public/drag",
      dest: "",
    },
  ],
  ngbseal: [
    {
      src: "public/onlineSeal",
      dest: "",
    },
    {
      src: "public/sign",
      dest: "",
    },
  ],
  sdjnseal: [
    {
      src: "public/sign",
      dest: "",
    },
  ],
};

function getConfigByKey(routers, projectKey) {
  if (!routers || typeof routers !== "object") {
    return [];
  }
  if (!projectKey || typeof projectKey !== "string") {
    return [];
  }
  const normalizedKey = projectKey.trim().toLowerCase();
  if (Object.prototype.hasOwnProperty.call(routers, normalizedKey)) {
    return [...defaultKey, ...routers[normalizedKey]];
  }
  return [...defaultKey];
}

export { publics, getConfigByKey };

Enter fullscreen mode Exit fullscreen mode

我的大概配置是以上,打包没有问题,但是在开发环境运行时会出现public内容引用404问题

Top comments (0)