【大前端】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 ['"]+\/csdn\/([^'"]+)['"]+/gs),].forEach((e) => {// 替换import语句code = code.replaceAll(e[0], `const ${e[1]}='/csdn/${e[2]}'`);});// 返回最终内容return code;},},],
})