Не удалось смонтировать компонент: шаблон или функция визуализации не определены. "vue.js" с asp.net mvc

Question

У меня небольшой учебный проект, я написал его для обучения интеграции vue.js с mvc.У меня есть 1 компонент, и я использую его в экземпляре vue, и все было в порядке, когда я записывал HTML-код для этих компонентов в файл js (у меня есть 2 файла .cshtml и .js для каждого компонента vue)сценарий, который работаетФайл test1.cshtml.js

import Vue from "vue";
document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{        
        mounted: function () { },
        data: function () {
            return {
            };

        },
        template: `
                <div>
                <ul>
                    <li>Yaman</li>
                </ul>
                </div>
  `
    });
});

и экземпляр vue

contact.cshtml.js файл

import Vue from "vue";

import test1 from "../Home/test1.cshtml.js"; Vue.component('test1', test1);

document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),          
        mounted: function () { },
        data: {
            message: "One-way binding msg",
            twoWayBindingMessage: "Type here ..."
        }        
    }); });

и файл contact.cshtml

@{
    ViewData["Title"] = "Hello World - Page";
}

<section>
    <div id="view">
        <h4>@ViewData["Title"]</h4>
        <h3>@ViewData["Message"]</h3>
        <div>
            <span>One way binding message:{{message}}</span>
            <br /><hr />
            <span>2-way binding msg: {{twoWayBindingMessage}}</span><br />
            <br />
            <input type="text" v-model="twoWayBindingMessage">

            <test1></test1>
        </div>
    </div>
</section>
<script src="~/js/Contact.bundle.js"></script>

, но моя проблема начинается, когда я пытаюсь записать шаблон test1 в отдельный файл "cshtml file" как "файл контакта"

сценарий, который не работает

test1.cshtml файл становится

import Vue from "vue";

document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{        
        mounted: function () { },
        data: function () {
            return {
            };
        }
    });
});

и test1.cshtml

<section>
    <div  id="testnew">
        <ul>
            <li>Yaman</li>
        </ul>
    </div>        
</section>
<script src="~/js/test1.bundle.js"></script>

в этом случае я получаю эту ошибку

Contact.bundle.js: 6 [Vue warn]: Не удалось смонтировать компонент: шаблон или функция визуализации не определена.

найдено в

--->

Кто-нибудь может мне помочь, пожалуйста?

Answer 1

наконец я нашел решение :) мы должны
1 - добавьте эту часть в webback.config после установки загрузчика html

    {
        test: /\.(html|cshtml)$/,
        loader: 'html-loader'
    },

2 - импорт файла cshtml в файл .js

import test1Html from "../Home/test1.cshtml";

3 - использовать вышеуказанный импорт в качестве шаблона в файле js

template: test1Html,

Файл vue компонента js должен быть таким, как показано ниже

import Vue from "vue";
import test1Html from "../Home/test1.cshtml";

document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{
        mounted: function () {
            console.log('mounted test1');
        },
        template: test1Html,
        data: function () {
            return {
                message: "try test1 binding",
                list: ['one','two','three','four','five']
            };
        }
    });
});

Большое спасибо.