[英]priv/static/js/app.js updates randomly when changes Vue files - Phoenix/Elixir/Vue.js
我有一个vue.js / Phoenix应用程序。 我试图了解如何正确配置前端资产。 我无法理解为什么每次更改其他文件中的priv / static / js / app.js文件都会不断更新。 我正在尝试研究这种行为，但似乎找不到任何信息。
<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这一事实似乎真的很奇怪。 是否有人对我可以去这里或了解更多的地方发生的事情有资源或答案？
除了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并指定自己的规则以提供对这些排除文件的访问。）
听起来可能与此相反，这恰恰是Phoenix（与Brunch）提供的行为。
主要思想是在assets/js/app.js实现您的JS功能，然后将Brunch（ http://brunch.io/ ）作为构建工具将内容，编译/传输并输出到priv/static/js/app.js 。
这意味着，通过Phoenix附带的默认配置，您可以在assets/js/app.js /js/app.js中的代码中使用ES6，但这将被“翻译”为可执行形式（浏览器可以理解），并位于priv/ 。 priv/static已公开公开，这将是以下提供的内容：
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
总结一下。
priv/static中的代码并不意味着可以通过代码进行更改，而是由您在assets/源代码控制的更改自动到达那里。
如果有什么帮助，您可以在此处查看有关凤凰城资产的旧博客文章之一。
祝好运！
到目前为止，我一直很高兴将Webpack与Vue一起使用。 它使用了与mudasobwa提到的类似的，可配置的watcher程序。 在Webpack中，如果您触摸捆绑包中的某个文件，它将仅重新编译所需的文件（根据依赖关系图，该文件仍然可以很多），可能会早午餐全部重新编译。
我还使用Yarn来管理npm，并且我总是包括vuex，除非它确实只是基本的东西（尽管与文件组织无关，它确实有助于在任何非平凡的应用程序上组织vue）。 然后
/资产
然后在模板方面，我编写了一个很小的，过于复杂，易碎的系统，以使加载在模板上的“捆绑包”（在html文档头中）自动化，但是您可以在需要的地方捆绑每个捆绑包。
如何使用 Elixir Phoenix 1.6 和 esbuild 设置 Vue.js
[英]How to setup Vue.js with Elixir Phoenix 1.6 and esbuild
Vue app.js 与主页上的其他 JavaScript 文件发生冲突（Laravel）
[英]Vue app.js colliding with other JavaScript files on homepage (Laravel)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.