Javascript 如何使用Laravel'；vue.js 2上的baseurl是什么？

我有两个组件

组件1，名称为SearchResultVue.vue组件

组件如下所示：

<template>
    ...
        <span class="pull-right" v-show="totalall>8">
            <pagination :data="list" :baseUrl="this.Laravel.baseUrl" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
        </span>
    ...
</template>

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a :href="prevPage" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in total">
                <a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
            </li>
            <li>
                <a :href="nextPage" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        }
    }
</script>

...
...

组件调用组件2。名称为Pagination.vue component

分页组件如下所示：

<template>
    ...
        <span class="pull-right" v-show="totalall>8">
            <pagination :data="list" :baseUrl="this.Laravel.baseUrl" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
        </span>
    ...
</template>

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a :href="prevPage" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in total">
                <a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
            </li>
            <li>
                <a :href="nextPage" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        }
    }
</script>

导出默认值{
道具：['total'，'data'，'nextPage'，'prevPage']，
计算：{
baseUrl（）{
返回window.Laravel.baseUrl
}
}
}

执行时，控制台中存在2个错误

错误1如下所示：

<template>
    ...
        <span class="pull-right" v-show="totalall>8">
            <pagination :data="list" :baseUrl="this.Laravel.baseUrl" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
        </span>
    ...
</template>

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a :href="prevPage" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in total">
                <a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
            </li>
            <li>
                <a :href="nextPage" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        }
    }
</script>

[Vue warn]：未在上定义属性或方法“Laravel” 实例，但在渲染期间被引用。确保声明为被动 数据选项中的数据属性

错误2如下所示：

<template>
    ...
        <span class="pull-right" v-show="totalall>8">
            <pagination :data="list" :baseUrl="this.Laravel.baseUrl" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
        </span>
    ...
</template>

<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a :href="prevPage" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in total">
                <a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
            </li>
            <li>
                <a :href="nextPage" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default{
        props:['total', 'data', 'nextPage', 'prevPage'],
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        }
    }
</script>

未捕获的TypeError:无法读取未定义的属性“baseUrl”

---

如何解决错误？

您需要将其附加到

窗口。我认为混淆是因为Laravel通过
Laravel.csrfToken
提供了
csrf\u令牌
，但要做到这一点，它将以下内容放在
标题中
：

    window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
    ]); ?>

以下是JSFIDLE:
在您的网页配置中设置环境变量。

module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '"http://myshop.ct-staging.tk'",
}

// config/dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: '"http://myshop.dev/"' // this overrides the BASE_URL value of prod.env
})

在Vue应用程序中使用它。

module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '"http://myshop.ct-staging.tk'",
}

// config/dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: '"http://myshop.dev/"' // this overrides the BASE_URL value of prod.env
})

Vue.config.baseurl=process.env.BASE\u URL
您无法从VueJS访问Laravel变量。它不是在
窗口中定义的
…@mu，那么我的问题的正确解决方案是什么？为什么需要baseurl？它是env变量，因此您可以在webpack配置中设置它并以这种方式使用它？@M U，因为在本地主机和服务器上，它是不同的url。在本地主机中，我的url如下：
http://myshop.dev/search-result
。在服务器上，我的url如下：
http://myshop.ct-staging.tk/search-result
。如何设置我的网页包配置？已发布完整答案，回答您应该如何设置。@M U，我可以在哪里设置我的网页包配置？/project/config，如果您使用的是网页包vuetemplate@M我的
/project/config
如下所示：。似乎我不使用webpack vue Template这是你的laravel配置。。你的网页配置在哪里？@mu，我怎么能找到？似乎网页包配置不存在似乎您掌握了vue.js。我需要你的帮助。看看这个：。也许你能帮我