vuetify.js.map HTTP 404
Posted
技术标签:
【中文标题】vuetify.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 组件不会显示为好像未安装该库...
【问题讨论】：
【参考方案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>
© 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 组件不会显示为好像未安装该库...以上是关于vuetify.js.map HTTP 404的主要内容，如果未能解决你的问题，请参考以下文章
使用 K6 - 3000 VU 轰炸 AWS EC2。连接开始超时，现在我无法通过 SSL 或 HTTP 请求连接到实例。这是啥？