Laravel Mix中如何使用Vue.js或jQuery？求技术指导

我来帮你一步步排查解决这个问题，你的Vue代码没跑起来大概率是几个常见的配置或版本问题导致的：

1. 先确认Vue的安装版本 #

首先打开项目根目录的package.json文件，看看dependencies里的vue版本：

• 如果是^3.x.x，那你的Vue 2写法（new Vue({...})）是不兼容的，需要改用Vue 3的语法
• 如果是^2.x.x，那继续往下检查配置

2. 配置Laravel Mix正确处理Vue #

打开webpack.mix.js，确保你的Mix配置里包含Vue编译的指令：

• 对于Vue 3，配置应该是这样：

mix.js('resources/js/app.js', 'public/js')
   .vue();

• 对于Vue 2，需要指定版本：

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

如果之前没加.vue()这一行，Mix不会把Vue代码打包进去，这是很常见的遗漏点！

3. 调整app.js里的Vue代码 #

根据你的Vue版本修改代码：

情况1：Vue 3版本 #

把你的代码改成Vue 3的写法：

import { createApp } from 'vue';

const app = createApp({
    data() {
        return {
            title: "my title"
        }
    }
});

app.mount('#coba');

情况2：Vue 2版本 #

如果是Vue 2，你的代码本身没问题，但需要确保在app.js里先引入Vue：

import Vue from 'vue';

const app = new Vue({
    el: '#coba',
    data: {
        title: "my title"
    }
});

4. 重新编译前端资源 #

在终端里运行编译命令：

• 开发环境用：npm run dev（编译一次）
• 或者npm run watch（监听文件变化自动编译）
  这一步很重要，修改配置和代码后必须重新编译，否则你的修改不会生效。

5. 确保视图正确引入编译后的JS文件 #

在你的Blade视图里，要确保引入了编译后的app.js文件，而且最好放在页面底部（或者用defer属性），避免DOM还没加载完就执行Vue代码：

<div id="coba">
    <h3>{{ title }}</h3>
</div>

<!-- 引入编译后的JS -->
<script src="{{ asset('js/app.js') }}"></script>

如果把JS放在<head>里，需要加上defer：

<script src="{{ asset('js/app.js') }}" defer></script>

最后检查浏览器控制台 #

如果还是不行，打开浏览器的开发者工具（F12），看控制台有没有报错信息——比如“Vue is not defined”说明Vue没被正确引入，或者“Cannot mount Vue on null element”说明#coba元素不存在（可能是JS执行时DOM还没加载）。

按照上面的步骤走，应该就能解决你的问题了！

内容的提问来源于stack exchange，提问作者yokana