How to include external Vue template into an HTML file

Asked By: Anonymous

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>

    http://../src/main.js   
  </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 http://../src/main.js 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      
    }
  ]
})


Solution

Answered By: Anonymous

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://vuejs.org/v2/guide/deployment.html

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno