Cypress+TypeScript中import.meta.url引发加载器错误的解决问询

1. 修复Cypress E2E中import.meta.url的加载错误 #

Cypress E2E默认构建链不支持原生ES模块的import.meta语法，切换为Vite预处理器即可对齐项目构建配置：

• 安装Cypress Vite插件：

yarn add -D @cypress/vite-plugin

• 修改cypress.config.ts配置预处理器：

import { defineConfig } from 'cypress'
import vitePreprocessor from '@cypress/vite-plugin'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor())
    },
    // 保留其他E2E配置项
  },
})

配置完成后，E2E测试文件即可正常解析import.meta.url。

2. 让@路径别名在Cypress测试中生效 #

需要同时配置TypeScript类型解析和构建工具的路径映射：

步骤1：配置TypeScript路径 #

确保项目根目录tsconfig.json已有路径映射（Vue初始化项目默认生成）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

在cypress/tsconfig.json中继承根配置：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

步骤2：配置构建工具别名 #

如果使用Vite预处理器（E2E或组件测试），在cypress.config.ts中添加别名配置：

import { defineConfig } from 'cypress'
import vitePreprocessor from '@cypress/vite-plugin'
import { resolve } from 'path'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor({
        resolve: {
          alias: {
            '@': resolve(__dirname, './src')
          }
        }
      }))
    },
  },
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
      viteConfig: {
        resolve: {
          alias: {
            '@': resolve(__dirname, './src')
          }
        }
      }
    }
  }
})

3. 多环境通用的public目录文件访问方法 #

利用Vite自动注入的import.meta.env.BASE_URL变量，该变量会自动适配开发、生产、组件测试环境的基础路径，E2E环境配置Vite预处理器后也能正常获取。

编写工具函数src/utils/publicPath.ts：

export const getPublicFileUrl = (filename: string): string => {
  return new URL(filename, import.meta.env.BASE_URL).href
}

使用示例：

// src/foo.ts
import { getPublicFileUrl } from '@/utils/publicPath'

const logoUrl = getPublicFileUrl('logo.png') // 自动适配不同环境的路径

该方法在开发（http://localhost:5173/logo.png）、生产（部署域名路径）、Cypress组件测试和E2E测试中均可正常工作。

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