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

Posted 2023-02-22

【中文标题】如何在 vue.js 2 上使用 Laravel 的 baseurl？

【英文标题】：How can I use Laravel's baseurl on the vue.js 2?

【发布时间】：2017-06-16 16:43:55

【问题描述】：

我有 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 警告]：属性或方法“Laravel”未在 实例，但在渲染期间引用。确保声明反应式 数据选项中的数据属性。

错误2是这样的：

未捕获的类型错误：无法读取未定义的属性“baseUrl”

我该如何解决这些错误？

【问题讨论】：

你不能从 VueJS 访问 Laravel 变量。 window 中无论如何都没有定义它...

@M U，那么我的问题的正确解决方案是什么？

为什么需要baseurl？它是环境变量，所以你可以在你的 webpack 配置中设置它并以这种方式使用它？

@M U，因为在本地主机和服务器上，它是不同的 url。在本地主机中，我的网址是这样的：http://myshop.dev/search-result。在服务器上，我的网址是这样的：http://myshop.ct-staging.tk/search-result。如何设置我的 webpack 配置？

发布了完整的答案，你应该怎么做。

【参考方案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/

【讨论】：

看来你掌握了 vue.js。我需要你帮忙。看看这个：***.com/questions/41952393/…。也许你可以帮助我

【参考方案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

【讨论】：

@M U，我可以在哪里设置我的 webpack 配置？

/project/config 如果你使用的是 webpack vue 模板

@M U，我的/project/config 是这样的：postimg.org/image/y5hfca1i9。看来我不用 webpack vue 模板

这是你的 laravel 配置。你的 webpack 配置在哪里？

@M U，我怎样才能找到它？似乎 webpack 配置不存在