Question

我目前正在创建一个vue应用程序，想知道如何将其集成到模板中并向其中传递vars（道具）。

所以我基本上运行npm run dev，对应用程序及其所有组件进行编码，到目前为止一切都很好。

当我运行npm run build时，我会在由webpack创建的build文件夹中得到一些js。

我猜（如之前在stackoverflow上所见），我可以将这些文件加载到模板中，创建一个id为“ App”的html元素，一切正常，并且该应用程序自动初始化。

但是现在我的问题是：该应用会触发一些Ajax请求，并且根据环境的不同，目标也不同（dev：api.local，test：api.testsystem.com，prod：api.livesystem.com，.. ）。

因此，我需要将URL从外部传递到应用程序中。我们不会在部署时构建该应用程序，因为它位于与使用它的“网站”不同的存储库中。（我们的计划是在这些项目中手动复制构建文件，或者在其他项目加载该文件的地方提供类似CDN的url）。对于其他项目，我的意思是基于symfony的网站或typo3插件，...

因此，我记得从React可以启动一个React.render('app.js', {props: 'api-url': 'http://api.local'});之类的应用程序（别杀了我，就像这样... ...）

如何在vue中做到这一点？

赞：

new Vue(
  <template>
    <App :api-url="api-url" />
  </template>

  <script>
    import App from "path/to/app.js";

    export default {
      data() {
        api-url: "inject url here"
      }
    }
  </script>
);

或添加数据属性，例如<div id="App" data-api-url="http://url">并尝试在应用程序内部访问它？

我也看到过类似env-loader的东西-但是我不确定这是否对我有帮助。

Answer 1

您谈论的是不同的环境模式。您应该阅读此documentation，了解如何以不同的环境模式启动vue应用。

您可以为每种模式定义不同的.env文件，并使用此文件填充process.env，也可以根据示例使用NODE_ENV = development来启动vue.js，并在需要适当传递的地方检查process.env.NODE_ENV变量。

将Vue与vars / props集成到模板中

1 个答案: