Javascript (Vue.js) 无法在移动设备和其他连接的设备上运行，但可以在运行本地主机的桌面上运行

Question

我尝试在本地主机上运行我的 laravel 项目，然后尝试通过本地主机地址将其连接到其他移动设备和台式机/笔记本电脑上。当我尝试在托管本地主机的桌面上运行该功能时，它正在工作，但在其他设备中，它不起作用。这是我的 JavaScript 代码。

我尝试查看我的检查结果，这就是我得到的结果。

“无法加载资源:net::ERR_CONNECTION_REFUSED”

这是我的脚本不起作用:

<script>
const app = new Vue({
    el:'main',
    data:{
        dropdown: [],
        selected: null,
        trans:{}

    },
    mounted(){
        this.getTrans();

    },
    methods:{
        getTrans(){
            axios.get('http://localhost/dqrs/api/transactions')
            .then((response)=>{
                this.trans=response.data
            })

            .catch(function (error){
                console.log(error);
            });
        },
        setDropdown: function (type) {
                    this.selected = null;
                    this.dropdown = this.trans[type];
                    console.log(type)
                    }

    }
})

Answer 1

您似乎正在尝试使用 localhost 访问网站资源，该资源可以在您尝试运行代码的设备上运行。但当您尝试从联网设备访问它时，它将不起作用。

确保您没有将 localhost 硬编码为 HTTP 客户端的 baseUrl(在您的情况下很可能是 axios)。从 .env 文件中读取其值。最后，当您提供应用程序时，请使用 --host 选项将设备的 IP 地址指定为主机。

php artisan serve --host=<your-device-IP>