当我想启动vue 3 typescript项目时,出现以下错误:

 ERROR  Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
 Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
at new NodeError (node:internal/errors:371:5)
at defaultResolve (node:internal/modules/esm/resolve:1016:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ESMLoader.import (node:internal/modules/esm/loader:276:22)
at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
at importModuleDynamically (node:vm:381:46)
at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
at loadFileConfig (C:\Projects\backify-ui\documentation\node_modules\@vue\cli-service\lib\util\loadFileConfig.js:28:7)

这个错误发生在我将我的vue.config.js重命名为vue.config.mjs之后.有趣的是,这个项目是通过gitpod进行的.io,但不在phpstorm和vscode中.

我的vue.配置.mjs:

import rehypeHighlight from "rehype-highlight";

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

推荐答案

整个问题似乎是当前vue cli配置和 node 的一个缺陷.js版本.欲了解更多信息,请查看@Dima Parzhitsky和@Zhang Buzz的 comments .

对我来说,最好的解决方法就是简单地将@vue/cli@5.0.0-beta.7与 node v16.12.0结合使用.

我也用vue.config.mjs而不是vue.config.js

另一个解决方案可能是将整个东西放入包装中.json,在@James Batchelor的 comments 中有更多关于这一点的信息(但我没有测试它)

Vue.js相关问答推荐

如何将模板传递给EJS菜单

v-model 修饰符返回空

Vue Datepicker 不会在渲染时显示默认日期

Vuetify 扩展面板,面板标题左侧带有图标

VueJS:为什么在input事件处理程序中触发Input输入事件?

如何根据生产或开发模式读取不同的 .env 文件?

如何在 vuejs 中异步加载图像 src url?

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

Vue Prop 没有初始化器,也没有在构造函数中明确赋值

使用 vue-router 的默认子路由

如何在生产模式下为 chrome 扩展启用 Vue devtools?

Vue组件未在laravel 5.3中使用Passport 显示

将 SignalR 与 Vue.js 和 Vuex 集成

Vue - 如何在 v-if 或组件中使用窗口对象

依赖关系甚至在 package.json 和 node_modules 中都没有定义

Vuetify RTL 风格

如何在 VueJS 中下载本地存储的文件

在 VueJS 中使用 Axios - 这个未定义

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

Vue-i18n - 无法读取未定义的属性配置