帶有Vue.js的ASP.NET Core不接受我的純js組件

Question

我使用默認的“帶有Vue.js的ASP.NET Core”模板，並希望編寫在普通Vue.js項目中使用的簡單組件，但是我決定使用“純” JS而不是打字稿，但是顯然我的端口確實無法正常工作。 有什么問題嗎？

in ./ClientApp/components/test/test.vue Module parse failed: ...\components
\test\test.vue Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
|   <template>  
|       <h3>Sign Up!</h3>  
|       <div class="form-group">
@ ./ClientApp/boot.ts 10:36-81 @ multi event-source-polyfill webpack-hot-
middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts

---

<template>
    <h3>Sign Up!</h3>
    <div class="form-group">

        <label>Username:</label>
        <input type="text" placeholder="Username" v-model="user.login">

        <button @click="submit">Submit</button>
    </div>    
</template>


<script>
export default 
{
    data() {
        return{
            user:{
                login: ''
            }
        };
    },
    methods:{
        submit(){
            this.$http.post('http://API:1234/post', this.user)
                        .then (response => {
                                console.log(response);
                              },
                              error =>{
                                console.log(error);
                              });
        }    
    }
}
</script>

---

靴子ts

import './css/site.css';
import 'bootstrap/dist/js/npm';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
    { path: '/', component: require('./components/home/home.vue.html') },
    { path: '/counter', component: require('./components/counter/counter.vue.html') },
    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },
    { path: '/test', component: require('./components/test/test.vue') }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html'))
});

Answer 1

解：

我加了

{test：/.vue$/，loader：'vue-loader'}，

到webpack.config.js中的部分：模塊，規則。

因此，最后是：

rules: [
    { test: /\.vue$/, loader: 'vue-loader'},
    { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
    { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
    { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]