無法安裝組件：模板或渲染函數未定義-使用Laravel-mix時出現vue警告

Question

問題

我在Vue2中創建了一個項目的前端。 我使用了一個名為“ vue-svg-inline-loader”的插件將我的svg圖像轉換為嵌入式svg代碼。 為了使腳本正常工作，我必須將此配置代碼添加到我的vue.config.js中。

團隊現在已經使用Laravel-mix在后端（Laravel）上實現了前端。 這破壞了我的“ vue-svg-inline-loader”，因為它不再具有確定目標的配置。

我嘗試過的代碼

我在StackOverflow上閱讀了很多問題和答案，但是這種配置看起來是如此龐大，以至於我似乎無法對我編寫它的方式投入多少精力。 我相信，從我的嘗試中，我丟失了先前文件中的rule（vue）和指向插件的use（“ vue-svg-inline-loader”）。

我以前的vue.config.js正在運行

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/css/all.scss";`
            }
        }
    },
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-svg-inline-loader")
                .loader("vue-svg-inline-loader")
                .options({ /* ... */ });
    }
}

我在嘗試webpack.mix.js

mix.webpackConfig({
    module : {
        rules : [
            'vue',
            {
                use : [
                    'vue-svg-inline-loader',
                    {
                        loader: 'vue-svg-inline-loader',
                        options : {}
                    },
                ]
            },
        ]
    },
});

更新

8月26日更新：我設法與vue-svg-inline-loader的開發人員聯系。 我們致力於一些潛在客戶，並設法做到這一點：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('resources/assets', 'public/assets', true)
    .webpackConfig({
        module: {
            rules: [
                {
                    use: [
                        {
                            loader: "vue-svg-inline-loader",
                            options: {
                                    inline: {
                                        keyword: "svg-inline",
                                        strict: true
                                    }
                            }
                        }
                    ]
                }
            ]
        }
    });

這樣，它可以正確加載所有SVG，但不會加載任何使用與SVG格式不同的圖像的img。 我認為這是一個規則或測試問題，因此我添加了test: /\\.vue$/, . test: /\\.vue$/, 這樣我遇到了缺少vue-loader的錯誤，所以我也添加了vue-loader 。 使用vue-loader聲明后，將編譯代碼。 當我訪問該應用程序時，僅返回一個空白頁以及以下控制台錯誤： [Vue warn]: Failed to mount component: template or render function not defined.

最終的不起作用的代碼如下所示：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('resources/assets', 'public/assets', true)
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: "vue-loader",
                            options: { /* ... */ }
                        },
                        {
                            loader: "vue-svg-inline-loader",
                            options: {
                                    inline: {
                                        keyword: "svg-inline",
                                        strict: true
                                    }
                            }
                        }
                    ]
                }
            ]
        }
    });

Answer 1

設法與Laravel Mix團隊一起找到解決方案。 我還通知了vue-svg-inline-loader開發人員，該解決方案現在應該在他們的文檔中介紹。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('resources/assets', 'public/assets', true)
    .override(config => {
        config.module.rules.push({
            test: /\.vue$/,
            use: [{ loader: 'vue-svg-inline-loader' }]
        })
    });