【大前端】vite忽略指定前缀的静态资源

背景

在日常开发中会出现引用网络资源的情况，但又的网络资源为了安全着想，会通过服务器代理的方式对外提供

所以在代码中往往写入的是相对路径，而vite在处理相对路径引入时，会根据路径去找本地的资源文件，但这里引入的是网络资源，所以本地根本不存在

那么唯一的解决办法就是：将import语句变成一个声明字符串变量的语句

vite官方在忽略并没直接提供忽略指定前缀静态资源的方法，但提供了将指定资源变为字符串的方式，但需要在开发时将资源在js脚本中引入，且在资源路径后加上 ?url 标识等标识

这显然并不是很符合实际的日常开发和需求

解决方案

上面提到了《将import语句变成字符串变量声明》，那么实现方式可以如下：

1. 编写插件，vite使用插件化思想，处理各种资源
2. 编写插件的transform生命周期，它主要是对当前资源的内容做处理，比如修改文本内容，所以符合本文需求
3. 通过正则匹配所需要的 import语句，然后将 import语句 替换为 变量声明语句
4. 返回替换完成的文本内容，交给下一个插件

export default defineConfig({
  plugins: [
      {
        name: "ignore-path",
        transform(code) {
         // 例如这里忽略以csdn开头的静态资源
          [
            ...code.matchAll(
              /import ([a-zA-Z0-9_]+) from ['"]+\https://www.cxjfun.top/csdn\/([^'"]+)['"]+/gs
            ),
          ].forEach((e) => {
          	// 替换import语句
            code = code.replaceAll(e[0], `const ${e[1]}='https://www.cxjfun.top/csdn/${e[2]}'`);
          });

		 // 返回最终内容
          return code;
        },
      },
    ],
})