如何在 vue.js 2 上使用 Laravel 的 baseurl？

Question

我有 2 个组件

组件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>

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

分页组件是这样的：

<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个错误

错误1是这样的:

[Vue warn]: Property or method "Laravel" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

错误2是这样的:

Uncaught TypeError: Cannot read property 'baseUrl' of undefined

如何解决错误？

Answer 1

您需要将其附加到 window。我认为混淆是因为 Laravel 通过 Laravel.csrfToken 使 csrf_token 可用，但要做到这一点，它会在 header:

中放置以下内容

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

就我个人而言，我不喜欢将 php 与 javascript 混合使用，但如果您真的想将 baseurl 添加到全局 Laravel 对象中，您可以只是做：

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

这是 JSFiddle：https://jsfiddle.net/w6szt02q/

Answer 2

在您的 webpack 配置中设置环境变量。

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 应用程序中使用它。

Vue.config.baseurl = process.env.BASE_URL

如何在 vue.js 2 上使用 Laravel 的 baseurl？

How can I use Laravel's baseurl on the vue.js 2?

javascript

pagination

vue.js

laravel-5.3

vuejs2