Webpack vuetify.js.map HTTP 404

我在vuetify中遇到以下错误： DevTools未能加载SourceMap:无法加载的内容webpack:///node_modules/vuetify/dist/vuetify.js.map: HTTP错误：状态代码404，net:：ERR\u未知\u URL\u方案 我使用网页包

我尝试创建vutify组件，有些元素没有正确显示，似乎缺少css

我在Google Chrome下的源代码中看到过，我可以看到vuetify/dist目录，但它不包含vuetify.js.map文件。 我使用了以下项目：github.com/TrilonIO/aspnetcore-Vue-starter

是否需要向webpack.config.js文件添加任何内容来管理地图文件

我在webpack.config.js中有一个地图文件：

plugins: [
      new VueLoaderPlugin(),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('./wwwroot/dist/vendor-manifest.json')
      })
    ].concat(isDevBuild ? [
      // Plugins that apply in development builds only
      new webpack.SourceMapDevToolPlugin({
        filename: '[file].map', // Remove this line if you prefer inline source maps
        moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
      })
    ] : [
      extractCSS,
      // Compress extracted CSS.
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true
        }
      })
    ])

---

非常感谢你。我明白问题的根源：我忘了使用v-app标签

在IIS上构建和发布站点时，我遇到了另一个问题。

---

Vuetify组件不会显示为库未安装…

欢迎使用堆栈溢出

最新答案 感谢您提供更多信息！我能够安装并成功地使用Vuetify运行。以下是我采取的步骤：

我安装了以下NPM软件包（尽管您可能不需要所有这些软件包）：

这里有到的链接。您应该不需要配置webpack以生成

vuetify.js.map

，因为这已经应该在

node\u modules/vuetify/dist/

ClientApp/plugins/vuetify.js文件包含：

从“Vue”导入Vue
从“Vuetify”导入Vuetify
导入“vuetify/dist/vuetify.min.css”
Vue.use（Vuetify）
常量选项={
图标：{
icont:'mdiSvg'
}
}
导出默认的新Vuetify（opts）

然后在

ClientApp/app.js

中，我添加了

import vuetify from./plugins/vuetify'

，并将

vuetify

对象添加到主

Vue

实例中

我将

ClientApp/components/app root.vue中的模板更新为：

你好，世界！
&抄袭；2020 Testy McTesterface

我将这两行添加到

视图/Shared/_Layout.cshtml

中的

部分：

最后，我开始将

ClientApp/components/nav menu.vue

更新为：

{{route.icon}
{{route.display}

显然还有很多bug需要解决，但我认为这应该给你一个好的开始

先前的回答（在提供额外信息之前） 我没有足够的细节来确切地知道是什么导致了您的问题，但以下是一些可能对您有所帮助的线索：

“URL方案”的“方案”是

：//

前面的部分。所以在像

http://example.com

，方案将是

http://

。常见的URL方案有很多，如

ftp://

（对于ftp）或

mysql://

（对于mysql数据库）。在这种情况下，ChromeDevTools试图打开一个包含scheme

webpack://

的URL，但它声称不知道这意味着什么

当您使用内置的webpack dev server运行VueJs应用程序时（即从命令行运行

vue run serve

），当您尝试在浏览器中查看其中一个文件的源代码时（如此屏幕截图），webpack会将这些文件的源代码提供给您的浏览器，而且他们倾向于使用

webpack://

URL方案

以下是您可能遇到的一些问题：

网页包开发服务器已停止运行，因此Chrome无法再访问该文件

您的开发服务器配置不正确。它以前有用吗？您能否撤消最近所做的一些更改，看看是否能够找出问题的原因

如果你提供更多的细节，我可能会有更多的运气诊断这个问题。一般来说，当你在这里提问时，你提供的细节越多越好

---

祝你好运

谢谢你的回复。我在Google Chrome下的源代码中看到过，我可以看到vuetify/dist目录，但它不包含vuetify.js.map文件。我使用了以下项目：是否有任何东西可以添加到webpack.config.js文件来管理地图文件？非常感谢。我理解问题的来源：我忘记使用v-app标签，但在IIS上构建和发布网站时，我还有另一个问题。Vuetify组件不会显示为库未安装。。。

$ npm install -D vuetify sass sass-loader fibers deepmerge @mdi/js @mdi/font