Vue.js css and js declared in index.html are not working

Question

I downloaded a theme providing html, css3, js file and I added the path as below source

<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Porto - Responsive HTML5 Template 7.5.0</title>

<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Porto - Responsive HTML5 Template">
<meta name="author" content="okler.net">

<!-- Theme CSS -->
<link rel="stylesheet" href="/static/css/theme.css">
<link rel="stylesheet" href="/static/css/theme-elements.css">
<link rel="stylesheet" href="/static/css/theme-blog.css">
<link rel="stylesheet" href="/static/css/theme-shop.css">

<!-- Current Page CSS -->
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/settings.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/layers.css">
<link rel="stylesheet" href="/static/vendor/rs-plugin/css/navigation.css">

<!-- Demo CSS -->


<!-- Skin CSS -->
<link rel="stylesheet" href="/static/css/skins/skin-corporate-5.css">

<!-- Theme Custom CSS -->
<link rel="stylesheet" href="/static/css/custom.css">

<!-- Head Libs -->
<script src="/static/vendor/modernizr/modernizr.min.js"></script>

It works well when I approach at first However, when i move using router it doesn't run some css and JavaScript.

so I tried to add a javascript path on component file

<template>
    <div role="main" class="main">
        test
    </div>
</template>

<script>
    import "/static/js/theme.js"
</script>

When I try like this I can see this error

This dependency was not found:

* /static/js/theme.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/parents/Robot.vue

To install it, you can run: npm install --save /static/js/theme.js   

is there the way to load whole index.html again? or another way to resolve this issue?

Answer 1

Instead of writing static in the index.html files path, use <%= BASE_URL %>. For example instead of adding all css and script files with href="/static/vendor/modernizr/modernizr.min.js" , write like this href="<%= BASE_URL %>/vendor/modernizr/modernizr.min.js"

Answer 2

Try to add scripts in the main.js and stylesheets directly in the App.vue file. I had lots of problems with importing files in my index.html file. But when I moved all the imports everything worked fine.