Vue3+TS项目将vue.config.js改为mjs后启动报ERR_UNSUPPORTED_ESM_URL_SCHEME错误

报错原因 #

该错误是Windows系统下Node.js ESM加载机制的特有问题：你将配置文件重命名为vue.config.mjs后，项目会以ESM规范加载配置，但低版本@vue/cli-service内置的loadFileConfig逻辑未对Windows系统的本地绝对路径做格式转换，直接传入了带c:协议头的路径，而ESM加载器仅识别file://开头的合法URL格式的路径。Gitpod运行环境为Linux，路径规则与Windows不同，因此不会触发该报错。

解决方案 #

方案1：升级@vue/cli-service（最推荐） #

该问题是Vue CLI旧版本的已知Bug，v5.0.8及以上版本已经修复了配置文件加载时的路径转换逻辑，直接升级依赖即可：

# npm
npm update @vue/cli-service

# yarn
yarn upgrade @vue/cli-service

升级完成后直接启动项目即可正常运行。

方案2：将配置改回CommonJS格式 #

如果暂时不想升级Vue CLI版本，可以把vue.config.mjs改回vue.config.js，将ESM语法替换为CommonJS语法：

const rehypeHighlight = require("rehype-highlight");

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("mdx")
      .test(/\.mdx?$/)
      .use("babel-loader")
      .loader("babel-loader")
      .options({ plugins: ["@vue/babel-plugin-jsx"] })
      .end()
      .use("@mdx-js/loader")
      .loader("@mdx-js/loader")
      .options({
        jsx: true,
        rehypePlugins: [rehypeHighlight]
      })
      .end();
  },
};

方案3：保留ESM格式配置的临时方案 #

如果必须使用ESM格式的配置文件，可以通过修改启动参数兼容：

1. 安装跨平台环境变量工具：npm i cross-env -D
2. 修改package.json中的启动脚本：

{
  "scripts": {
    "serve": "cross-env NODE_OPTIONS=--experimental-specifier-resolution=node vue-cli-service serve"
  }
}

以上方案生效后，PhpStorm和VSCode本地启动即可恢复正常。

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