能否用Vite拦截匹配正则的特定导入？禁止客户端导入服务端脚本

完全可以实现！你只需要给Vite加个自定义插件，在模块解析阶段检测导入路径，一旦客户端代码尝试导入*.server.*格式的文件，直接抛出错误拦下来。

具体配置方法 #

1. 打开你的vite.config.ts，添加自定义插件：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'block-server-imports',
      resolveId(source, importer) {
        // 只在客户端环境下执行检测逻辑
        if (process.env.NODE_ENV !== 'server' && importer) {
          // 匹配所有带`.server.`后缀的文件
          if (/\.server\./.test(source)) {
            throw new Error(`❌ 禁止在客户端代码中导入服务端文件: ${source}`);
          }
        }
        return null; // 让Vite继续处理正常的模块解析
      }
    }
  ]
});

2. 环境区分（可选）

如果你的项目是服务端渲染（SSR）类型，担心环境混淆的话，可以在Vite配置里明确声明客户端标识：

export default defineConfig({
  define: {
    'process.env.IS_CLIENT': JSON.stringify(true)
  },
  // 其他项目配置...
});

纯前端项目直接用第一个插件配置就足够了。

效果验证 #

当你在客户端代码中写了这类导入语句时：

import { authLogic } from './authentication.server.ts';

不管是开发热更新还是生产构建阶段，Vite都会直接抛出错误，把这种违规导入掐在摇篮里，避免服务端代码被意外打包到客户端产物中。

另外也可以配合ESLint规则做静态检查，但Vite插件是在构建环节强制拦截，可靠性更高。

内容的提问来源于stack exchange，提问作者TTT