首次使用Vue.js，如何导入Resources目录下的app.js至partials scripts

Hey there! Let's work through this Vue.js setup problem step by step—we'll get your app.js imported into your partials scripts without changing the assets() method's public directory setting, and fix that annoying "multi" error you hit.

Here's how to resolve it: #

1. Keep your source file in Resources, compile it to Public
   Since you can't modify where assets() points, the cleanest approach is to leave your original app.js in Resources/Assets/js/ and use a build tool to compile it into the public directory (where assets() looks for files). If you're using a tool like Laravel Mix (super common for setups with the assets() helper), update your webpack.mix.js with this line:

   mix.js('Resources/Assets/js/app.js', 'public/js');
   

   Run npm run dev (for development) or npm run prod (for production) to compile the file. This will generate a bundled app.js in public/js/ that the assets() method can easily access.

2. Import the compiled file in your partials
   Now in your partials' scripts section, use the asset() method to link to the compiled file:

   <script src="{{ asset('js/app.js') }}"></script>
   

   This works perfectly because assets() targets the public directory, and we've just placed a usable copy of your Vue code there.

3. Why moving files caused the "multi" error
   That error typically happens when your build tool (like webpack) detects conflicting entry points or duplicate file paths in the public directory. Manually moving your app.js likely created a conflict with existing build configurations. Keeping source files in Resources and compiling to public avoids this mess entirely.

4. If you aren't using a build tool
   If you want to skip the build step, manually copy app.js from Resources/Assets/js/ to public/js/—make sure the filename is unique if there's already an app.js there (maybe name it vue-app.js). Then import it like:

   <script src="{{ asset('js/vue-app.js') }}"></script>
   

   Just remember to re-copy the file every time you make changes to the original in Resources.

That should get your Vue.js setup running smoothly without breaking the assets() configuration!

内容的提问来源于stack exchange，提问作者Victori