Как я могу использовать baseurl Laravel на vue.js 2?

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.

Error 2, как это:

Uncaught TypeError: Cannot read property 'baseUrl' of undefined

Как я могу решить ошибки?

Answer 1

Вам необходимо будет прикрепить его к window. Я думаю, что Путаница происходит потому, что Laravel делает 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/

Answer 2

1. Установите переменные env в конфигурацию вашего веб-пакета.

   module.exports = { NODE_ENV: 'Производство "', base_url:» http://myshop.ct-staging.tk», }

   // конфигурации/dev.env.js module.exports = сливаться (prodEnv { NODE_ENV: 'развитие "', base_url: 'http://myshop.dev/"' // это переопределяет значение bASE_URL из prod.env })

2. использовать его в Vue приложении. Vue.config.baseurl = process.env.BASE_URL