Question

我需要帮助来预渲染我的网站。所以起初，我有一个功能齐全的网站。我想将pre-render-spa插件添加到服务器。但是一切都毁了。我也需要更新Vuetify框架。然后这一切都搞砸了。遇到很多错误，但是设法部署了服务器，但是当我收到此消息时，“ Vuetify未正确初始化”，因此我需要帮助将新的Vuetify初始化为我的CLI 3 vue。我的Main.js文件。

Main.js

import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/style.css';
var VueScrollTo = require('vue-scrollto');
import VueAnalytics from "vue-analytics";

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 1,
  observer: true,
})


Vue.use(VueScrollTo)
Vue.config.productionTip = false;
Vue.use(VueAnalytics, {
  id: "UA-89031274-11",
  autoTracking: {
    screenview: true
  }
});
new Vue({
  router,
  store,
  mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
  render: function (h) {
      return h(App);
  },
}).$mount("#app");

vue.config.js

const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports.plugins.push = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html",
        inject: false
      }),
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, './dist'),
        routes: ["/"]
      }),
      new VuetifyLoaderPlugin()
    ]
  }
};

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/styles/main.sass'

Vue.use(Vuetify);


export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  },
})

所以这是所有与预渲染和可视化相关的文件。我尝试重新安装vuetify和vue-cli，npm install并没有解决vuetify无法加载的问题。我看到vuetify更新了他们的安装文档，他们说在vuetify之前包括$mount("#app"); 在这种情况下，构建会一直持续下去并且不会停止。

new Vue({
  router,
  store,
  vuetify,
  mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
  render: function (h) {
      return h(App);
  },
}).$mount("#app");

非常感谢您的帮助。

Answer 1

在main.js中已更改

import './plugins/vuetify'

到

import vuetify from './plugins/vuetify'**

，然后将其添加到新的Vue实例中，如下所示：

new Vue({
...
  vuetify,
...
}).$mount('#app')

例如main.js：

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import vuetify from './plugins/vuetify'
    import 'material-design-icons-iconfont/dist/material-design-icons.css'
    Vue.config.productionTip = false
    new Vue({
      router,
      store,
      vuetify,
      render: h => h(App)
    }).$mount('#app')

和vuetify.js：

    import Vue from 'vue'
    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    import colors from 'vuetify/es5/util/colors'

    Vue.use(Vuetify)

    export default new Vuetify({
      iconfont: 'md',
      theme: {
        primary: colors.green.darken1,
        secondary: colors.green.lighten4,
        accent: colors.green.darken3
      }
    })

需要帮助将Vuetify初始化为我的vue-cli 3

1 个答案: