在资源目录中使用 prerender-spa-plugin 和 Laravel Vue.js

Question

我已经通过 npm 在我的 Laravel 应用程序中安装了 prerender-spa-plugin，该应用程序的资源目录中有 Vue.js 应用程序。如何调用 prerender-spa-plugin 在里面？我已经看到了很多独立应用程序的示例，但在资源目录中没有任何支持它的示例。

Answer 1

仅在组件中使用插件：称为本地注册

<script>
   import 'plugin_name' from 'plugin_directory'  //located at /node_modules

//to use it in component call it like shown below

export default{
  ...
}
</script>

然后根据它的应用来使用它

在多个组件/视图中使用它。称为全局注册

在app.js中导入组件并注册

import Plugin from 'plugin_directory'

Vue.use(Plugin)

例如。要使用 axios，我们将其导入并在 app.js 中全局注册，如下所示

import axios from 'axios'

Vue.use(axios)
//that's it

这就是我们如何在 Vue 中的 app.js 中全局注册多个插件

require('./bootstrap');

import Vue from 'vue'
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);

import VueRouter from 'vue-router';
Vue.use(VueRouter);

Vue.config.productionTip =false;

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

import Notifications from 'vue-notification'
Vue.use(Notifications)

import VueHolder from 'vue-holderjs';
Vue.use(VueHolder)

import App from './layouts/App'


import router from './router'
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('autocomplete', require('./components/AutoComplete.vue')); 
Vue.component('topnav', require('./components/Nav.vue'));
Vue.component('imageupload', require('./components/ImageUpload.vue'));

const app = new Vue({
    el: '#app',
    router,
    template:'<App/>',
    components:{ App }
});