Question

从vuetify LTS更新到vuetify 2.0.0-beta.5时遇到问题。

在一切正常之前，从app.scss加载了vuetify样式

错误：

[Vue警告]：监视程序“ isDark”的getter错误：“ TypeError：无法   读取未定义的属性“ dark””

TypeError：无法读取未定义的属性“ dark”

[Vue警告]：渲染错误：“ TypeError：无法读取属性'dark'   的不确定”

我已经卸载了vuetify，然后将其安装并更新为https://stackoverflow.com/a/49250912这样的测试版

package.json

{
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@mdi/font": "^3.7.95",
    "@symfony/webpack-encore": "^0.22.0",
    "axios": "^0.19.0",
    "chart.js": "^2.8.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.8",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.8",
    "webpack-dev-server": "^3.2.1",
    "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server --hot --disable-host-check --host 174.28.1.5 --public 174.28.1.5:8080",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },
  "dependencies": {
    "apexcharts": "^3.8.1",
    "chart.js": "^2.8.0",
    "core-js": "^3.1.4",
    "vue-apexcharts": "^1.4.0",
    "vue-google-signin-button": "^1.0.4",
    "vue-telegram-login": "^2.1.0",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
  }
}

webpack.config.js

var path = require('path');
var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addStyleEntry('styles', './assets/css/app.scss')
    .enableSassLoader()
    .enableVueLoader()
    .addEntry('landing', './assets/js/modules/landing/main.js')
    .addEntry('main', './assets/js/modules/dashboard/main/main.js')
    .addEntry('main-m', './assets/js/modules/dashboard_m/main.js')
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enableVersioning(Encore.isProduction())
    .enableSingleRuntimeChunk()
;
main_config = Encore.getWebpackConfig();
main_config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = main_config;

main.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import VueApexCharts from 'vue-apexcharts';
import Dashboard from './Dashboard';
import store from './store/index'

Vue.component('current-session', () => import('./DashboardModule'));

Vue.use(Vuetify, {
    iconfont: 'fa'
});
Vue.use(VueApexCharts);

Vue.component('apexchart', VueApexCharts);

require('apexcharts');
require('vue-apexcharts');

new Vue({
    el: '#dashboard-m',
    store,
    components: {Dashboard},
    render: a => a(Dashboard),
});

app.scss

@import "~@fortawesome/fontawesome-free/css/all.min.css";

已经尝试通过添加vuetify-loader来修复它，不是我做得正确，但仍然无法正常工作，这里是我的更新：

webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
// .enableSassLoader() - turned off it
.addLoader({
        test: /\.s(c|a)ss$/,
        use: [
            'style-loader',
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    implementation: require('sass'),
                    fiber: require('fibers'),
                    indentedSyntax: true // optional
                }
            }
        ]
    })

从 package.json

中删除 node-sass
所以当a添加了这个

<v-app id="inspire" :dark="false">

我已经用<v-app>标签解决了我的问题，但得到了其他组件未加载默认道具的信息像这样：


[Vue警告]：挂接的钩子中出现错误：“ TypeError：无法读取属性   未定义的“注册””

或者这个：


[Vue警告]：观察者“ showOverlay”的getter错误：“ TypeError：   无法读取未定义的属性“宽度”

Answer 1

感谢 jacek （Vuetify核心团队）这里是将vuetify添加到Vue的正确方法：

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

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

Answer 2

编辑为

... vuetify：新的Vuetify（） ...

并设法纠正了我的问题。谢谢！

无法将Vuetify项目更新为vuetify 2.0.0-beta5

2 个答案: