net::ERR_ABORTED 404 when loading javascript from Spring Boot

Viewed 803

So Im trying to make a sample sign up page using spring boot(which I am very new to). I am using vuelidate and a couple of other javascript files. My file directory is as follows:

-resources
  |
  -static
    |
     -javascript
        |
         -vuelidate
          |
           -vuelidate.min.js
  |
  -templates
    |...

I have add the files to my html like so:

    <head>
        <meta charset="UTF-8">
        <title>SignUp Screen</title>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="static/javascript/vuelidate/vuelidate.min.js"></script>
        <script src="static/javascript/is/is.min.js"></script>
    </head>

I tried adding the js links like src=https://localhost:8080/vuelidate.min.js but it didnt work. I was told not to include the 'static' directory in the above path for the link. I'm not sure what I'm doing wrong. I have seen other resources say to use WebJars, or SSL certificates but I know there is an easier way to do this. Please help me thanks for your time!

EDIT:

Here is the project structure

enter image description here

2 Answers

Assuming you HTML is rendered from templates folder using thymleaf you can include your script files as below.

<script src="/javascript/vuelidate/vuelidate.min.js"></script>

So it turns out I had a broken version of the min file which is why it wasn't working. Another thing is you have to properly import which keywords I wanted to use from the validators js(Im assuming this is what it is referred to as 'importing').I did something like this in a file called import-module.js:

//Allow vue in browser dev extension to persist 
Vue.config.devtools = true;

//Add required vuelidate keyword identifiers here to be used
const { required, minLength, between, sameAs} = window.validators;

I then included this script in whatever html files I was using. Not sure if this will help anyone but might as well include it. Happy Coding!

Related