Question

我有一个vue.js / Phoenix应用程序。我试图了解如何正确配置前端资产。我无法理解为什么我的priv / static / js / app.js文件会在我更改其他文件中的内容时不断更新。我正在尝试研究这种行为，但我似乎无法找到任何信息。

app.html.eex

<body>
  <%= render @view_module, @view_template, assigns %>
  <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>

我的基本问题是如何构建vue.js应用程序？我在asset/src中更改内容的事实动态地改变static/js/app.js中的某些内容似乎很奇怪。是否有人对这里可能发生的事情或我可以去了解更多的地方有资源或答案？

Answer 1

除了Pawel所说的，这种行为可能是有意配置的。 config/dev.exs中指定了观察者：

watchers: [
  node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
  cd: Path.expand("../assets", __DIR__)]]

这将在开发模式中用于允许所谓的“热重新加载”：当资产发生一些变化时，不需要重新加载应用程序，app.js将被重建并自动重新加载。

还有assets/brunch-config.js个文件，其中可以指定生成app.js的方式的规则。默认情况下，只是将assets中找到的所有内容编译到单个javascript文件中，但这种行为可能很容易更改（例如，可能会将任何内容排除在app.js之外，并指定自己的规则来提供访问权限这些被排除的文件。）

Answer 2

正如听起来相反，这正是凤凰城（早午餐）所提供的行为。

主要思想是在assets/js/app.js中实现您的JS功能，然后是Brunch（http://brunch.io/），因为构建工具将获取内容，编译/转换并输出到priv/static/js/app.js。< / p>

这意味着，使用Phoenix附带的默认配置，您可以在assets/js/app.js的代码中使用ES6，但这将被“翻译”为可执行形式（浏览器可以理解），并位于{{ 1}}。 priv/被公开曝光，这将是以下内容：

priv/static

总结。

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>中的代码并非由代码更改，它会自动通过priv/static中源代码管理下的更改自动生成。

如果有任何帮助，您可以查看有关凤凰城here资产的旧博文之一。

祝你好运！

Answer 3

到目前为止，我很高兴使用Webpack和Vue。它使用与mudasobwa提到的类似，可配置的watcher。在Webpack中，如果你触摸一个属于bundle的文件，它将只重新编译所需的文件（依赖于依赖图可能仍然很多），可能早午餐重新编译所有文件。

我也使用Yarn来管理npm，并且我总是包含vuex，除非它真的是基本的东西（尽管与文件组织无关，它确实有助于在任何非平凡的应用程序上组织vue）。然后

/资产

JS
- 我用于将webpack输出到其各自的捆绑包/应用程序中的入口点文件
- 用于组织这些文件夹的文件夹，通常是/ components-views-related，/ store-related，/ shared-utilities
CSS
- .scss文件，划分为可以分割成“全局”样式和每个“入口点”所需的单个样式。然后我在“所有页面”上使用“常规”scss样式表，并在每个页面上使用相应的css包。

然后在模板方面，我写了一个小的，过于复杂，脆弱的系统，只是自动化加载到模板上的“bundle”（在html文档头中），但你可以只加载每个bundle / s你需要它们。

更改Vue文件时，priv / static / js / app.js随机更新 - Phoenix / Elixir / Vue.js

app.html.eex

3 个答案: