Javascript <；上的Laravel Mix Vuejs组件语法错误；模板/>；

我正在使用Windows10操作系统进行开发，我创建了一个Laravel8，与VueJs混合的项目。我的

/components/app.vue

上的文件正在返回一个

语法错误：意外令牌（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>

webpack.mix.js文件：

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

您使用的是laravel mix v6，它将

.vue（）

添加到

mix.js（…）

：

---

对于Vue 3，请选中您正在使用的laravel mix v6，它将

.Vue（）

添加到

mix.js（…）

：

---

对于Vue 3检查

我看不出您所提供的代码有任何错误。你有没有试着把它全部抹掉，从头开始重新打字？可能在那里的某个地方有一个看不见的角色。我假设您的laravel mix文件具有

.vue（）

？@Daedalus不确定laravel mix文件上的

.vue（）

，我在哪里可以找到它？我只检查了

webpack.mix.js

文件。我看不出您提供的代码有任何错误。你有没有试着把它全部抹掉，从头开始重新打字？可能在那里的某个地方有一个看不见的角色。我假设您的laravel mix文件具有

.vue（）

？@Daedalus不确定laravel mix文件上的

.vue（）

，我在哪里可以找到它？我只检查了

webpack.mix.js

文件。我遵循了答案，也遵循了你的建议，但又出现了一个新的错误这就是所显示的

\js\app.js既不是posix也不是windows路径，并且文件系统中没有定义“dirname”方法

请检查这个问题我遵循了答案，这也是您的建议，但又出现了一个新错误，如图所示

\js\app.js既不是posix也不是windows路径，并且文件系统中没有定义“dirname”方法

请检查此问题

{
    "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"
    }
}

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