добро пожаловать в переполнение стека!
Обновленный ответ
Спасибо за дополнительную информацию! Мне удалось установить ASP .NetCore Vuejs Starter и успешно запустить его с Vuetify. Вот шаги, которые я предпринял:
- Я установил следующие NPM пакеты (хотя вам могут не понадобиться все из них):
$ npm install -D vuetify sass sass-loader fibers deepmerge @mdi/js @mdi/font
Вот ссылка на
суть моего webpack.config.js файла . Вы должны
НЕ настроить веб-пакет для получения
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>
Очевидно, что есть еще много ошибок, которые необходимо устранить, но я думаю, что это должно дать вам хороший начало.
Предыдущий ответ (до предоставления дополнительной информации)
У меня недостаточно подробностей, чтобы точно знать, что является причиной вашей проблемы, но вот несколько подсказок, которые могут вам помочь:
«Схема» «схемы URL» - это часть перед ://. Таким образом, в URL-адресе, подобном http://example.com, схема будет http://. Существует множество различных схем URL, таких как ftp:// (для FTP) или mysql:// (для MySQL баз данных). В этом случае Chrome DevTools пытается открыть URL-адрес со схемой webpack://, но утверждает, что не знает, что это значит.
Когда вы запускаете приложение VueJs с помощью встроенного в dev-сервере webpack (т. е. при запуске vue run serve из командной строки), когда вы пытаетесь просмотреть источник одного из этих файлов в вашем браузере (как на этом скриншоте), webpack передает исходный код этих файлов в ваш браузер и они, как правило, используют схему URL webpack:///.
Вот некоторые проблемы, которые могут у вас возникнуть:
- Сервер разработки webpack остановлен, поэтому Chrome больше не может получить доступ к файлу
- Ваш сервер разработки настроен неправильно. Это работало раньше? Можете ли вы отменить некоторые из последних изменений, которые вы внесли, чтобы узнать, сможете ли вы выяснить, что вызвало проблему?
Если вы предоставите более подробную информацию, мне может повезти с диагностикой проблемы. В общем, когда вы задаете вопросы здесь, чем больше информации вы предоставляете, тем лучше!
Удачи!