Wie kann ich Laravels Baseurl auf dem vue.js 2 verwenden?

Question

Ich habe 1 2 Komponente

Komponente, Der Name wie diese SearchResultVue.vue Komponente

Die Komponente ist:

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

Die Komponente Aufruf Komponente 2. Der Name ist Pagination.vue Komponente

Die Paginierung Komponente ist wie folgt:

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

Wenn er ausgeführt wird, in der Konsole existieren 2 Fehler

Fehler 1 ist wie folgt:

[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.

Fehler 2 ist wie folgt:

Uncaught TypeError: Cannot read property 'baseUrl' of undefined

Wie kann ich die Fehler lösen?

Answer 1

Sie müssen das an window anhängen. Ich denke, die Verwirrung kommt, weil Laravel die csrf_token verfügbar über Laravel.csrfToken macht aber zu tun, dass es die folgenden in der header platziert:

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

Ich persönlich mag es nicht php mit javascript mischen, aber wenn Sie wirklich wollen fügen Sie die baseurl mit Ihrem globalen Laravel Objekt, könnten Sie einfach tun:

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

die JSFiddle hier: https://jsfiddle.net/w6szt02q/

Answer 2

1. Legen Sie env-Variablen in Ihrer Webpack-Konfiguration fest.

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

   // config/dev.env.js module.exports = merge (prodEnv {: ' "Entwicklung"', BASE_URL: NODE_ENV ' "http://myshop.dev/"' // dies überschreibt den BASE_URL Wert von prod.env })

2. es in Ihrem Vue App verwenden. Vue.config.baseurl = process.env.BASE_URL