Script inclusion in index.html on Vue.js application gives 404

Question

My application has been simply generated by running this command:

vue init webpack

The template application has only vue-router installed by answering "Y" on the forth question of the wizard.

I want to include jquery from node_modules folder:

npm install --save jquery

then I add this

<head>
    <script src="node_modules/jquery/dist/jquery.js"></script>
</head>

on the index.html page.

Next step:

npm run dev

application starts up correctly but I got 404 on jquery.js .

I had never touched anything in the whole application except for that line in index.html .

We have the same problem in a bigger application but we had no idea if we could reproduce on a smaller one... but we managed to do it.

Answer 1

you have to import it in your component. webpack manage the dependencies.

If you have used vue init webpack you are also using vue-loader so for adding jquery to the Hallo component you can do like this

first as you have already done npm install --save jquery

After that open the file App.vue and in the section add the import:

<script>
import Hello from './components/Hello'
import jquery from 'jquery'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

Not sure is what are you looking for but this is how you can add a 3rd party lib

Script inclusion in index.html on Vue.js application gives 404

Question

1 answers

solution1
0 2017-03-28 16:46:33

Script inclusion in index.html on Vue.js application gives 404

Question

1 answers

solution1 0 2017-03-28 16:46:33

solution1
0 2017-03-28 16:46:33