vuetify.js.map HTTP 404
我有以下错误: DevTools未能加载SourceMap:无法加载内容为SourceMap HTTP错误:状态代码404，net::ERR_UNKNOWN_URL_SCHEME我使用webpack
我尝试创建vutify组件，有些元素显示不正确，似乎css丢失了。
我在Google的源代码中看到过，我可以看到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用户
发布于 2020-04-23 02:51:20
欢迎来到堆栈溢出！
更新答复
感谢您提供的额外信息！我成功地安装了ASP.NetCore Vuejs发酵剂，并成功地运行了Vuetify。以下是我所采取的步骤：
- 我安装了以下NPM软件包(尽管您可能不需要它们的全部)：
$ npm install -D vuetify sass sass-loader fibers deepmerge @mdi/js @mdi/font- 这里有一个指向文件的链接。您应该而不是需要配置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>- 我将这两行添加到
<head>节中的Views/Shared/_Layout.cshtml中
<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>显然，仍然有许多but需要解决，但我认为这应该给您一个好的开始。
先前的回答(在提供额外信息之前)
我没有足够的细节来确切地知道是什么导致了你的问题，但以下是一些可能对你有帮助的线索：
"URL方案“的”方案“是://之前的部分。因此，在像http://example.com这样的url中，该方案将是http://。有许多不同的网址方案是常用的，如ftp:// (用于FTP)或mysql:// (用于MySQL数据库)。在这种情况下，Chrome DevTools试图打开一个包含webpack://方案的URL，但它声称不知道这意味着什么。
当您使用内置的webpack开发服务器(即通过命令行运行vue run serve )运行VueJs应用程序时，当您试图在浏览器中查看其中一个文件的源时(如在屏幕截图中)，webpack将这些文件的源代码提供给您的浏览器，它们倾向于使用webpack:/// URL方案。
以下是您可能遇到的一些问题：
- webpack开发服务器停止运行，因此Chrome无法再访问该文件
- 您的dev服务器配置不正确。以前起作用了吗？您能否撤销最近所做的一些更改，看看您是否能够找出造成问题的原因？
如果你提供更多的细节，我可能会更幸运地诊断这个问题。一般来说，当你在这里提问时，你提供的细节越多，越好！
祝好运!
https://stackoverflow.com/questions/61372850
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号