Twilio+Vue.js+Laravel视频教程代码无控制台输出问题求解

数据老陈

2026-8-29

问题背景

参照基于Laravel 6开发的Twilio视频会议应用搭建教程实操时，已通过补全AccessTokenController完整命名空间修复路由相关报错
教程存在明显笔误：要求替换welcome.blade.php内容的代码实际是Vue单文件组件逻辑，对应应写入VideoChat.vue文件
将代码放入对应Vue文件后功能完全不运行，浏览器控制台无任何日志输出，作为Vue初学者无法定位问题

教程给出的待替换代码片段：

<script>
export default {
    name: 'video-chat',
    data: function () {
        return {
            accessToken: ''
        }
    },
    methods : {
        getAccessToken : function () {

            const _this = this
            const axios = require('axios')
            
            // Request a new token
            axios.get('/api/access_token')
                .then(function (response) {
                    _this.accessToken = response.data
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    console.log( _this.accessToken )
                });
        }
    },
    mounted : function () {
        console.log('Video chat room loading...')

        this.getAccessToken()
    }
}
</script>

故障原因

Vue单文件组件（.vue后缀文件）要求必须包含<template>块，哪怕块内只有空的容器节点，缺省模板块会直接导致组件编译失败，无法完成挂载，自然不会触发mounted生命周期钩子，控制台也就不会有任何对应日志输出
Laravel 6默认的前端脚手架已经把axios绑定到了Vue实例原型上，全局可直接调用，不需要在方法内部用require('axios')重复引入，重复引入在部分构建环境下会触发依赖解析错误，阻断脚本运行
教程漏了组件注册、挂载、前端资源编译的前置步骤说明，只贴了组件的script逻辑，新手直接照抄必然跑不起来

修复方案

补全VideoChat.vue的必填结构，移除冗余的axios引入，把旧的function写法改成箭头函数避免this指向问题，修正后的完整基础代码如下：

<template>
  <div class="video-chat-wrapper">
    <!-- 后续视频流、控件等DOM元素写在这个区域即可 -->
  </div>
</template>

<script>
export default {
    name: 'video-chat',
    data() {
        return {
            accessToken: ''
        }
    },
    methods: {
        getAccessToken() {
            axios.get('/api/access_token')
                .then(response => {
                    this.accessToken = response.data
                    console.log('获取到的Access Token：', this.accessToken)
                })
                .catch(error => {
                    console.log('Token请求失败：', error)
                })
        }
    },
    mounted() {
        console.log('Video chat room loading...')
        this.getAccessToken()
    }
}
</script>

确认resources/js/app.js中已经正确注册该组件并初始化Vue实例，参考配置：

import Vue from 'vue'
import VideoChat from './components/VideoChat.vue'

new Vue({
    el: '#app',
    components: { VideoChat }
})

确认welcome.blade.php中存在id为app的Vue挂载节点，并且正确引入编译后的前端资源：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频会议应用</title>
</head>
<body>
    <div id="app">
        <video-chat />
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

每次修改前端代码后，在项目根目录执行npm run dev完成资源编译；如果需要边改边调试，可以执行npm run watch开启文件监听，代码保存后会自动重新编译。注意：首次运行前端构建命令前，需要先执行npm install安装所有前端依赖

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