Menu
I'm trying to build a practice website on a local web server with an address of http://localhost:3000/.
It properly displays the page when just HTML and JavaScript are involved, but when I try to include Vue as well, it doesn't work.
As it works fine when I'm not including Vue, I suspect that the reason why it's behaving funny is that the Vue file that I prepared is not properly connected to the other files and the HTML file doesn't recognize it.
But what could be the fix for this?
I'll show some more background info below.
[Directories & Files]
Currently, all the necessary files are stored in a directory called slutuppgift, and this folder contains the following sub-directories and files.
slutuppgift/
|-- public/ Static files
|-- |-- index.html HTML-code
|-- |-- feed.json the API's JSON-data
|-- src/
|-- |-- main.js JavaScript-code to initialize Vue & app.vue
|-- |-- app.vue Vue-code for the application
|-- |-- components/ Vue-code for components
|-- |-- views/ Vue-code for pages/templates (Vue-router).
|-- |-- router.js JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js JavaScript-kod for Express.js (the API)
My HTML code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="SeparateCSS.css">
</head>
<body>
<div id="app"></div>
<script src="../src/main.js"></script>
</body>
</html>
My JavaScript code (main.js)
import Vue from 'vue';
import VueRouter from './router';
import App from './app.vue';
Vue.config.productionTip = false
new Vue({
router: VueRouter,
render: h => h(App)
}).$mount('#app')
My Vue code (app.vue)
<template>
<div >
<h1>Experimenting to see if the h1 is displayed</h1>
</div>
</template>
<script>
export default {
data(){
return {
};
}
}
</script>
Why is the h1 "Experimenting to see if the h1 is displayed" not displayed?
Is it not enough to include a JavaScript file with the statement <script src="../src/main.js"></script> since the app.vue file is already connected to the main.js file?
[UPDATED]
Here is my router.js code.
import Vue from 'vue';
import VueRouter from 'vue-router';
import About from './views/about.vue';
// View component import
import AppHome from './views/home.vue';
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
// URL when view component are displayed
path: '/',
name: 'home',
// View component registration
component: AppHome
},
{
// URL when view component are displayed
path: '/about',
name: 'about',
// Lazy-loaded view component
component: About
}
]
})
646
asked Oct 23 '25 14:10
Before you can deploy your Vue app to a static web server you need to "build" it. Files like .vue files are effectively source code, the browser doesn't know what to do with them.
To generate the artifacts you require to deploy run:
vue-cli-service build
This will generate the deployable artifacts into the dist folder. Copy those up to your web server and you will be able to load it.
More detail is here:
https://v2.vuejs.org/v2/guide/deployment.html
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
