如何访问公用文件夹外的js文件？答案

【问题标题】：How to access a js file outside the public folder?如何访问公用文件夹外的js文件？
【发布时间】：2019-09-10 14:28:36
【问题描述】：

我试图在 laravel 项目的 app.js 文件中注册一个 vue 组件，但我似乎无法找到 app.js 的正确路径，有两个文件名为 app.js。这是我的文件结构：

public
        css
        js
               app.js

resources
        js
              components
                     Articles.vue
                     ExampleComponent.Vue
              app.js
              bootstrap.js

这是我将 app.js 文件导入刀片文件的位置：

<body>
    <div id="app">
        <articles>

        </articles>
    </div>
    <script type="text/javascript" src="{{ assets('js/app.js') }}"></script>


</body>

问题是我想访问resources 文件夹中的第二个app.js 文件，但是上面的代码一直给我public 文件夹中的第一个app.js 文件。

我尝试使用此代码URL::asset('resources/js/app.js') 为其提供文件的绝对路径
这给了我一个像 localhost:8000/resources/js/app.js 这样的 URL，这是正确的文件位置，但不知何故，这个链接会导致一个 404 页面。那么还有其他方法可以访问该文件吗？

谢谢

【问题讨论】：

npm run dev 重新编译从 resources/js/app.js 到 public/js/app.js 的更改。红色this页面。

标签： laravel vue-component

【解决方案1】：

首先

localhost:8000/something 始终引用public 目录中的something。因此，您不能将刀片文件中的 resource/js/app.js 引用为 js 文件。

其次

实际上，您不需要在刀片中使用resource/js/app.js 文件。如果您这样做，代码将无法正常工作。因为resources/js/app.js 中的代码是未编译的。您需要编译它们并在刀片文件中使用它们。那么，编译好的文件在哪里呢？它实际上是public/js/app.js 文件。这个文件是你的resource/js/app.js 的编译版本。

问题是每次修改resource里面的js文件，都需要重新编译js代码。所有这些代码将合并在一起，并将复制到public/js/app.js。

如何编译？

在编译您的 js 代码之前，您需要通过运行 npm install 命令确保您已正确安装前端依赖项。

如果所有依赖项都安装好了，你可以使用命令编译你的代码

npm run dev 用于开发级编译

npm run production 用于生产级别（最小化和安全）编译。

如果您不想每次更改文件时都运行npm run dev 命令，那么您可以运行npm run watch 命令。此命令将监视是否有任何 js 文件更改。如果更改它将自动编译。

【讨论】：

谢谢...我实际上尝试运行 npm run watch 并且遇到了一些错误并且试图在没有它的情况下工作...现在我只需要修复它..感谢您的解释