Question

我无法将vuetify 2成功集成到新的laravel安装中。我了解到，由于我没有使用Vue CLI 3，因此必须通过webpack config手动安装vuetify-loader。如何在laravel应用中执行此操作？

我尝试通过使用vuetify文档建议的代码通过webpack.mix.js修改webpack配置。

我的webpack.mix.js看起来像这样：

const mix = require('laravel-mix');

//MYCODE
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

    //MYCODE
    .webpackConfig(webpack => {
      return {
          plugins: [
            new VuetifyLoaderPlugin()
          ]
      };
    });

我还尝试将.env文件中的APP_ENV从“本地”更改为“生产”。

当我运行npm手表时，出现此错误：

/vuetifyapp/node_modules/webpack-cli/bin/cli.js:93 犯错 ^ 错误：找不到模块'vuetify-loader / lib / plugin'

Answer 1

在安装vuetify之后，您应该上传/安装依赖项，然后尝试做：

npm install

然后尝试：

npm run watch

应该可以

Answer 2

我设法整合的某些方式不记得怎么做。希望对您有帮助。

https://github.com/avgkudey/LaraVuetify

Answer 3

只需安装软件包：

npm install vuetify-loader -D

Answer 4

我总结了需要更改为Laravel应用程序以使用Vue添加SPA环境的文件。这将与Vue-CLI环境类似，并且您可以正常安装vuetify之类的npm软件包。

基本上，您需要配置以下4个文件：

resources / js / app.js;
resources / js / App.vue;
resources / views / welcome.blade.php;
routes / web.php;

这4个文件位于此处： https://gist.github.com/marcelobbfonseca/9d1156ab3633793b765456c6a1f44bbc

如果遵循此配置，则您的vue文件将位于resources/js/目录中，并且您可以运行npm install vuetify。将vuetify.js文件添加到resources/js/vuetify.js

这是示例vuetify.js配置

resources/js/app.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './vuetify'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Vue.config.productionTip = false
const app = new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

resources/js/vuetify.js

import Vue from 'vue'
import Vuetify from "vuetify"
import ptBr from './locale/ptBr.ts'
import 'vuetify/dist/vuetify.min.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)

export default new Vuetify({
    lang: {
        locales: { ptBr },
        current: 'ptBr',
    },
    icons: {
        iconfont: 'fa'
    },
    theme: {
        themes: {
            light: {
                primary: '#00551E',
                secondary: '#3C8750',
                tertiary: '#EEEEEE',
                accent: '#69FFF1',
                info: '#63D471',
                success: '#4CAF50',
                warning: '#FFC107',
                error: '#FF5252',
                danger: '#FF5252',
            },
            dark: {
                primary: '#321321'
            }
        }
    }
})

我为此环境配置和单元测试写了一个简短的medium article

Answer 5

经过很多问题，我在 Laravel 8 上解决了这个问题。添加到组件上的 v-app 标签中。

// resources/js/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

// resources/js/app.js
window.Vue = require('vue').default

import vuetify from './vuetify'
import store from './store/store'

Vue.component('g-home', require('./components/pages/GHome.vue').default)

const app = new Vue({
    store,
    vuetify,
    el: '#app',
});

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

如何在Laravel中使用Vuetify 2

5 个答案: