如何通过webpack.mix.js在Statamic中添加带有laravel-mix的vue-loader

时间:2019-04-03 16:40:53

标签: vue.js webpack laravel-mix vue-loader

添加vue-loader的适当laravel-mix webpackConfig()是什么?

我在Statamic上安装了laravel-mix,vue和vue-loader,并且如果在mix.js()中添加.js组件文件,Vue都可以正常工作。但是,无论我尝试什么,我似乎都找不到找到将vue-loader添加到我的项目的mix.webpackConfig()。我看过其他有关此的Stack帖子,并尝试了不同的语法,但是这些解决方案对我而言不起作用。

webpack.mix.js


const mix = require('laravel-mix');
const theme = 'my-theme';
const tailwindcss = require('tailwindcss');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

require('laravel-mix-tailwind');

mix.webpackConfig({
        module: {
            rules: [
              {
                test: /\.vue$/,
                loader: ['vue-loader']
              }
            ]
        },
        plugins: [
            new VueLoaderPlugin()
        ]
    })
    .setPublicPath('./')
    .sass('sass/app.scss', 'css/' + theme + '.css', {
        includePaths: ['node_modules']
    })
    .tailwind()
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.js') ]
    })
    .js([
        'js/src/app.js',
        'js/src/vendor/segment_trackers.js',
    ], 'js/' + theme + '.js')
    .extract();

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

package.json

    "devDependencies": {
        "cross-env": "^5.2.0",
        "laravel-mix": "^4.0.15",
        "laravel-mix-tailwind": "^0.1.0",
        "sass": "^1.17.4",
        "sass-loader": "^7.1.0",
        "tailwindcss": "^0.7.4",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-template-compiler": "^2.6.10"
    },

我当前收到此错误“ [VueLoaderPlugin错误]未找到与vue-loader匹配的用途。请确保与.vue文件匹配的规则在使用中包括vue-loader。”

0 个答案:

没有答案