Question

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

我目前正尝试在下面添加到我的Home.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">.

我什至尝试将:添加到这样的属性之前，因为错误提示：

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

但这给了我这个错误：

  - 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') }}"

Answer 1

好，我终于弄明白了。

根据Laravel's docs，我们可以通过在.env文件中的键前面加上MIX_

，将环境变量注入Mix中。

然后我像这样在env variables中定义这些.env：

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

因此，在我的Home.vue文件中，我有这个：

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

            };
        }
    };
</script>

现在我可以像这样访问它们：

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

奖金信息：

在问这个问题之前，我确实阅读过Laravel文档，并且还向我的MIX.文件中添加了.env变量。

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

npm run dev或npm run production

Vue-属性内插/使用速记

1 个答案: