<template /> 上的 Laravel Mix Vuejs 组件语法错误

Question

我正在使用 Windows 10 操作系统进行开发，并创建了一个 laravel 8，与 VueJs 项目混合使用。我的./components/app.vue 上的文件正在返回SyntaxError: Unexpected token (1:0)

这是 app.vue 文件中的内容

<template>
    <div>
        Event Calendar VueJs x Laravel
    </div>
</template>

<script>
export default {
    name: "App",
    data(){
        return{
            event: "",
            event_from: "",
            event_to: "",
        }
    }
}
</script>

我也在/resources/js/app.js上设置了这个vue组件，如下图

require('./bootstrap');

import Vue from "vue";

import App from "./components/app.vue";

const app = new Vue({
    el: "#app",
    components: {
        App
    }
});

webpack.mix.js file:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
]);

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue": "^2.6.12"
    }
}

我走到了尽头，我不明白为什么npm run hot 说这是SyntaxError

Answer 1

您正在使用 laravel mix v6，它将 .vue() 添加到 mix.js(...) ：

mix.js('resources/js/app.js', 'public/js').vue({ version: 2 })
   
mix.postCss('resources/css/app.css', 'public/css', [
        //
]);

对于 Vue 3 检查this answer