【问题标题】：vuetify.js.map HTTP 404vuetify.js.map HTTP 404
【发布时间】：2020-08-05 22:19:03
【问题描述】：

我在使用 vuetify 时遇到了这个错误： DevTools 无法加载 SourceMap：无法加载 webpack:///node_modules/vuetify/dist/vuetify.js.map 的内容：HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME 我使用 webpack

我尝试创建 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 组件不会显示为好像未安装该库...

【问题讨论】：

标签： webpack vuetify.js

【解决方案1】：

欢迎使用 Stack Overflow！

更新答案

感谢您提供更多信息！我能够安装 ASP.NetCore Vuejs Starter 并成功运行 Vuetify。以下是我采取的步骤：

我安装了以下 NPM 包（尽管您可能不需要全部）：

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

这是a gist of my webpack.config.js file 的链接。您应该不需要配置 webpack 以生成 vuetify.js.map，因为这已经应该在 node_modules/vuetify/dist/ 中下载
ClientApp/plugins/vuetify.js 文件包含：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {
  icons: {
    iconfont: 'mdiSvg'
  }
}

export default new Vuetify(opts)

然后在ClientApp/app.js 中我添加了import vuetify from './plugins/vuetify' 并将vuetify 对象添加到主Vue 实例中
我将ClientApp/components/app-root.vue 中的模板更新为：

<template>
  <v-app>
    <v-navigation-drawer app clipped :value="collapsed">
      <nav-menu params="route: route"></nav-menu>
    </v-navigation-drawer>
    <v-app-bar app clipped-left>
      <v-app-bar-nav-icon
        @click.stop="collapsed = !collapsed"
      />
      <v-toolbar-title>
        Hello, World!
      </v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer app>
      &copy; 2020 Testy McTesterface
    </v-footer>
  </v-app>
</template>

我将这两行添加到Views/Shared/_Layout.cshtml 的<head> 部分：

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@@mdi/font@@4.x/css/materialdesignicons.min.css" rel="stylesheet">

最后，我开始将ClientApp/components/nav-menu.vue 更新为：

<template>
    <div class="main-nav">
        <v-list-item
            v-for="(route, index) in routes"
            :key="index"
            :to="route.path"
        >
            <v-list-item-action>
                <v-icon>{{ route.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title>
                    {{ route.display }}
                </v-list-item-title>
            </v-list-item-content>
        </v-list-item>
    </div>
</template>

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

上一个答案（在提供额外信息之前）

我没有足够的细节来确切地知道是什么导致了您的问题，但这里有一些线索可能会对您有所帮助：

“URL 方案”的“方案”是 :// 之前的部分。所以在像http://example.com 这样的网址中，方案将是http://。常用的 URL 方案有很多，例如 ftp://（用于 FTP）或 mysql://（用于 MySQL 数据库）。在这种情况下，Chrome DevTools 试图打开一个具有 webpack:// 架构的 URL，但它声称不知道这意味着什么。

当您使用内置的 webpack 开发服务器运行 VueJs 应用程序时（即通过从命令行运行 vue run serve），当您尝试在浏览器中查看其中一个文件的源时（如此屏幕截图所示） )，webpack 将这些文件的源代码提供给你的浏览器，它们倾向于使用webpack:/// URL 方案。

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

webpack 开发服务器停止运行，因此 Chrome 无法再访问该文件
您的开发服务器配置不正确。以前可以用吗？您能否撤消最近所做的一些更改，看看是否能找出问题的原因？

如果您提供更多详细信息，我可能会更幸运地诊断出问题。一般来说，当你在这里提问时，你提供的细节越多越好！

祝你好运！

【讨论】：

感谢您的回复。我已经在 Google Chrome 下的源代码中看到了，我可以看到 vuetify / dist 目录，但它不包含 vuetify.js.map 文件。我使用了以下项目：github.com/TrilonIO/aspnetcore-Vue-starter webpack.config.js 文件中有什么要添加的东西来管理地图文件吗？
非常感谢。我明白问题出在哪里了：我忘了使用 v-app 标签
但是在 IIS 上构建和发布站点时，我遇到了另一个问题。 Vuetify 组件不会显示为好像未安装该库...