javascript - 带有 Vue.js 的 ASP.NET Core 不接受我的纯 js 组件

Question

我使用了默认的“ASP.NET Core with Vue.js”模板，并想编写在普通 Vue.js 项目中使用的简单组件，但我决定使用“纯”JS 而不是 typescript，但显然我的端口无法正常工作。可能出了什么问题？

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>

<小时/>

Boot 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' }
]