Php Vue-属性内部插值/使用速记

我在编译

.Vue

文件时遇到问题。 我正在使用Vue.js和Laravel运行SPA

我当前正在尝试将以下内容添加到我的

主页.vue

：

<ais-index app-id="{{ config('scout.algolia.id') }}" api-key="{{ env('ALGOLIA_SEARCH') }}" index-name="contacts">

    <ais-input placeholder="Search contacts..."></ais-input>
    <ais-results></ais-results>

 </ais-index>

但这给了我一个错误：

- app-id="{{ config('scout.algolia.id') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
- api-key="{{ env('ALGOLIA_SEARCH') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

  - invalid expression: Unexpected token { in

    {{ config('scout.algolia.id') }}

  Raw expression: :app-id="{{ config('scout.algolia.id') }}"

  - invalid expression: Unexpected token { in

    {{ env('ALGOLIA_SEARCH') }}

  Raw expression: :api-key="{{ env('ALGOLIA_SEARCH') }}"

---

好吧，我终于明白了

根据，我们可以通过在您的

.env

文件中添加带有

Mix\uu

然后，我在我的

.env

中定义这些

env变量，如下所示：

ALGOLIA_APP_ID=XXXXX
ALGOLIA_SECRET=YYYYY
MIX_ALGOLIA_APP_ID=XXXXX
MIX_ALGOLIA_SECRET=YYYYY

:app-id="angoliaAppId" :api-key="angoliaAppKey"

因此，在我的
Home.vue
文件中，我有以下内容：

<script>
    export default {
        data() {
            return {
                query: '',
                angoliaAppId: process.env.MIX_ALGOLIA_APP_ID,
                angoliaAppKey: process.env.MIX_ALGOLIA_SECRET,

            };
        }
    };
</script>

奖金信息：

在问这个问题之前，我确实阅读了Laravel文档，我还将
混合变量添加到了我的
.env
文件中

但是，您需要重新编译npm。使用
npm-watch
无法捕获这些更改。因此，您必须使用：

npm run dev
或
npm run production
您不能在vue文件中使用刀片语法。这些是javascript文件，不是PHP文件，您不能访问Laravel的函数。@Devon-知道如何访问我的
Vue
文件中的env变量吗？您必须创建javascript变量。你不能混合使用PHP和Javascript。我不知道您是如何加载SPA的，但是当SPA从服务器加载时，您可以创建变量。有趣的是，我以前从未见过这种情况。如果您链接到文档，其中讨论了包含环境变量的混合，可能对未来的读者有好处。
:app-id="angoliaAppId" :api-key="angoliaAppKey"