vue.js 2에서 Larabel의 baseurl을 사용하려면 어떻게 해야 하나요?

vue.js 2에서 Larabel의 baseurl을 사용하려면 어떻게 해야 하나요?

2개의 컴포넌트가 있습니다.

컴포넌트 1, 이름은 Search ResultVue입니다.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를 호출합니다.이름은 페이지네이션입니다.vue 성분

Pagination 컴포넌트는 다음과 같습니다.

<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] :속성 또는 메서드 "Laravel"은 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.

오류 2는 다음과 같습니다.

Uncaughed TypeError: 정의되지 않은 속성 'baseUrl'을 읽을 수 없습니다.

어떻게 하면 오류를 해결할 수 있을까요?

당신은 그것을 에 첨부할 필요가 있습니다.window내 생각에 라라벨이 그 곡들을 만들었기 때문에csrf_token에서 입수할 수 있다Laravel.csrfToken하지만 그러기 위해서는 다음과 같은 것이 있습니다.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/

웹 팩 설정에서 env 변수를 설정합니다.

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

언급URL : https://stackoverflow.com/questions/41954319/how-can-i-use-laravels-baseurl-on-the-vue-js-2