我很难用Vuetify 2.0.4更新现有项目。我相当确定自己可以正确初始化Vuetify-刷新应用程序时，我注意到Vuetify中发生了重大变化（例如，舍入与舍入），但是一旦修复了这些问题，剩下的就是样式错误消息的无样式应用
[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly?
我的代码中的每个Vuetify标签（）。
我想知道我的问题是否在于尝试解析.sass文件（在webpack.mix.js中），但最重要的是，我在这里完全迷失了空间，希望能找到一些方向。
谢谢，汤姆。
app.js
require('./bootstrap');
import i18n from './i18n.js';
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
import router from './routes.js';
import { store } from './store/store.js';
import VueUtils from './plugins/vue-utils.js';
Vue.prototype.$http = axios;
import Exception from './helpers/Exception'
window.Exception = Exception;
import App from "./components/App.vue";
import Navbar from './components/nav/NavBar.vue';
import Footer from './components/nav/Footer.vue';
import SwitchLanguage from './components/tools/SwitchLanguage.vue';
import SocialMedia from './components/tools/SocialMedia.vue';
import ReturnButton from './components/tools/ReturnButton.vue';
import RelistButton from './components/tools/RelistButton.vue';
import WarningNotification from './components/tools/WarningNotification.vue';
import QuestionButton from './components/tools/QuestionButton.vue';
import Vuelidate from 'vuelidate';
Vue.config.productionTip = true;
Vue.use(VueUtils);
Vue.use(Vuelidate);
Vue.use(require('vue-moment'));
const vuetifyOptions = {
theme: {
dark: true,
}
};
Vue.use(Vuetify);
Vue.component('my-navbar', Navbar);
Vue.component('my-footer', Footer);
Vue.component('switch-language', SwitchLanguage);
Vue.component('social-media', SocialMedia);
Vue.component('return-button', ReturnButton);
Vue.component('relist-button', RelistButton);
Vue.component('warning-notification', WarningNotification);
Vue.component('question-button', QuestionButton);
export const eventBus = new Vue();
new Vue({
store,
i18n,
router,
vuetify: new Vuetify(vuetifyOptions),
render: h => h(App)
}).$mount("#app");
package.json
{
"name": "herdingcats",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"wrkbox": "workbox injectManifest && npm run dev"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"caniuse-lite": "^1.0.30000985",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.1.4",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html2plaintext": "^2.1.2",
"idb": "^4.0.4",
"laravel-echo": "^1.5.4",
"libphonenumber-js": "^1.7.21",
"lodash.uniq": "^4.5.0",
"material-design-icons-iconfont": "^5.0.1",
"popper": "^1.0.1",
"pusher-js": "^5.0.0",
"register-service-worker": "^1.6.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-faq-accordion": "^1.2.1",
"vue-i18n": "^8.12.0",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.7",
"vue-socialmedia-share": "^1.0.1",
"vue-tel-input": "^2.5.0",
"vuelidate": "^0.7.4",
"vuetify": "^2.0.3",
"vuetify-loader": "^1.3.0",
"vuex": "^3.1.1",
"vuex-i18n": "^1.11.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.2",
"@vue/cli-plugin-eslint": "^3.9.2",
"@vue/cli-plugin-pwa": "^3.9.0",
"@vue/cli-service": "^3.9.3",
"axios": "^0.19.0",
"babel-eslint": "^10.0.2",
"bootstrap": "^4.3.1",
"cross-env": "^5.2",
"deepmerge": "^4.0.0",
"eslint": "^6.1.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"friendly-errors-webpack-plugin": "~1.7",
"jquery": "^3.4",
"laravel-mix": "^4.1.2",
"mini-css-extract-plugin": "^0.8.0",
"popper.js": "^1.15",
"raw-loader": "^3.1.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-cli-plugin-vuetify": "^0.6.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.37.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"workbox-cli": "^4.3.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
runtimeCompiler: true,
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
],
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
}
}
]
}
]
},
};
webpack.mix.js
let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//mix.js('resources/js/app.js', 'dist/').sass('resources/sass/app.scss', 'dist/');
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
//new BundleAnalyzerPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
// module: {
// rules: [{
// test: /\.scss$/,
// use: [
// //fallback to style-loader in development
// process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
// "css-loader",
// "sass-loader"
// // {
// // loader: 'sass-loader',
// // options: {
// // implementation: require('sass'),
// // fiber: require('fibers'),
// // }
// // }
// ]
// }]
// },
}
);
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png"> ...
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="./manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="SafeVegetables">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="images/mstile-144x144.png">
<meta name="theme-color" content="#9CCC65">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>XXXX</title>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<script type='text/javascript'>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<noscript>
<p>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</p>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script>
let newWorker;
function showUpdateBar() {
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
};
// The click event on the pop up notification
document.getElementById('reload').addEventListener('click', function(){
newWorker.postMessage({ action: 'skipWaiting' });
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then(registration => {
console.log(`Service Worker was registered! Scope: ${registration.scope}`);
})
.catch(err => {
console.log(`Service Worker registration failed: ${err}`);
});
});
}
</script>
</body>
</html>