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

Posted 2023-02-23

【中文标题】<template /> 上的 Laravel Mix Vuejs 组件语法错误

【英文标题】：Laravel Mix Vuejs component Syntax error on <template />

【发布时间】：2021-04-15 11:05:53

【问题描述】：

我正在使用 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

【问题讨论】：

我认为您提供的代码没有任何问题。您是否尝试将其全部删除并从头开始重新输入？可能是某个地方有一个看不见的角色。我假设你的 laravel 混合文件有 .vue()?

@Daedalus 不确定 laravel 混合文件中的 .vue()，我在哪里可以找到它？我只检查了webpack.mix.js 文件。

【参考方案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

【讨论】：

我遵循了答案，也遵循了您的建议，但又出现了一个新错误，这就是\js\app.js is neither a posix nor a windows path, and there is no 'dirname' method defined in the file system所显示的内容@

请查看此问题github.com/JeffreyWay/laravel-mix/issues/2666