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

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

app.html.eex

---

我的基本问题是如何构造vue.js应用程序？事实上，我在

asset/src

中动态地更改了

static/js/app.js

中的某些内容，这似乎非常奇怪。有人对这里可能发生的事情或我可以去了解更多信息的地方提供了资源或答案吗？

听起来可能与此相反，这正是凤凰（带早午餐）提供的行为

主要思想是在

assets/JS/app.JS

中实现JS功能，然后作为构建工具的Brunch（）将获取内容，编译/传输并输出到

priv/static/JS/app.JS

这意味着，使用Phoenix附带的默认配置，您可以在

assets/js/app.js

中的代码中使用ES6，但这将“转换”为可执行形式（浏览器可以理解），并位于

priv/

中

priv/static

是公开的，这将是以下机构提供的内容：

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

结束

priv/static中的代码不是由代码更改的，它是通过您在assets/中对源代码进行的更改自动到达的

如果这有什么帮助的话，你可以看看一篇关于凤凰城资产的老博文

---

祝你好运

除了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

的规则。默认情况下，is只是将

资产中的所有内容编译到单个javascript文件中，但此行为可能很容易更改（例如，可以将任何内容排除在
app.js
中，并指定自己的规则以提供对这些排除文件的访问）
到目前为止，我很高兴使用Vue的webpack。它使用了与mudasobwa提到的类似的、可配置的观察器。在Webpack中，如果您触摸捆绑包中的一个文件，它将只重新编译所需的文件（根据依赖关系图，仍然可能有许多文件），可能早午餐会重新编译所有文件

我还使用Thread来管理npm，我总是包括vuex，除非它确实只是一些基本的东西（虽然与文件组织无关，但它确实有助于在任何非琐碎的应用程序上组织vue）。然后

/资产


js

我用于将网页包输出到其各自的捆绑包/应用程序中的入口点文件
用于组织这些内容的文件夹，通常是/组件视图相关、/store相关、/shared utilities

css

.scss文件，将其拆分为“全局”样式和每个“入口点”中所需的单个样式。然后我在“所有页面”上使用一个“通用”的scss样式表，并在需要它们的地方使用每个页面对应的css包


然后在模板方面，我编写了一个小型的、过于复杂的、脆弱的系统，用于自动加载模板（在html文档头中）上的“bundle”，但您可以在需要的地方加载每个bundle。
很有趣。我用的是webpack而不是早午餐，从概念上讲，它们的行为是一样的。您应该只修改
assets
目录中的文件，因为它将覆盖
priv/static
目录中的相应文件，谢谢您的解释！不过我用的是网页包。这有什么变化吗？很有趣。我用的是网页和纱线。
watchers: [
  node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
  cd: Path.expand("../assets", __DIR__)]]