Question

我正在尝试在本地网络服务器上建立一个练习网站，其地址为http://localhost:3000/。

仅涉及HTML和JavaScript时，它会正确显示页面，但是当我尝试同时包含Vue时，它也不起作用。

当我不包括Vue时，它工作正常，我怀疑它表现有趣的原因是，我准备的Vue文件未正确连接到其他文件，并且HTML文件无法识别它。

但是对此有什么解决办法？

我将在下面显示更多背景信息。

[目录和文件]

当前，所有必需的文件都存储在名为slutuppgift的目录中，并且该文件夹包含以下子目录和文件。

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)

我的HTML代码（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>

我的JavaScript代码（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')

我的Vue代码（app.vue）

<template>
  <div >  
    <h1>Experimenting to see if the h1 is displayed</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {

    };
  }
}
</script>

为什么未显示h1 "Experimenting to see if the h1 is displayed"？因为<script src="../src/main.js"></script>文件已经连接到app.vue文件，在语句main.js中包含JavaScript文件还不够吗？

[已更新]

这是我的router.js代码。

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      
    }
  ]
})

Answer 1

在将Vue应用程序部署到静态Web服务器之前，需要“构建”它。 .vue文件之类的文件实际上是源代码，浏览器不知道如何处理它们。

要生成您需要部署运行的工件：

vue-cli-service build

这将在dist文件夹中生成可部署的工件。将它们复制到您的Web服务器上，您就可以加载它。

更多详细信息在这里：

https://vuejs.org/v2/guide/deployment.html

Answer 2

slutuppgift文件夹是否直接在本地Web服务器上？使用这样的结构，您需要首先编译Vue应用程序。

如果您不想编译应用程序，则可以在其中包含Vue实例的纯HTML文件。在这种情况下，您可以将HTML文件中的VueJS链接到<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>。

您可以在官方文档here中查看Vue实例示例。

Answer 3

原始的有问题的代码如下。

<template>
  <div >  <!-- class="app" -->
    <!-- VueRouter-component som renderas till <a href="..."> -->
    <router-link to="/">Home</router-link> &nbsp;
    <router-link to="/about">About</router-link>

    <h1>Experimenting to see if the h1 is displayed</h1>

    <main role = "main">
          <div class = "flex-topbar">
            <div><h2> Kwitter </h2></div>

            <div>
              <ul class="menu" ontouchstart="">
                <li class="category" >MENY</li>
                <li class="category1">HEM</li>
                <a href = "https://dotinstall.com" target = "_blank">
                  <li class="category2">Lär mer</li>
                </a>
              </ul>
            </div>
          </div>

      <br>
            <p>Vad händer?</p>
      <article>
            <form class = "userContainer">
              <div class = "div1">
                <img src="avatar/avatar-loggedin.jpg">
              </div>
                  <textarea rows = "5" cols = "50" name = "kweet_content">  </textarea>
              <p><button class = "kwitterBtn", type = "submit">Kwitter</button></p>
            </form>
    </article>
        <br>
    </main>
    <section>

    </section>
    <br>
    <p><button class = "JsonEx">Show previous kweets</button></p>

    <p id="showHistory"></p>

    <!-- VueRouter-component som visar den component som definerats för en url i router.js -->
    <router-view></router-view>   

  </div>
</template>

<script>
// Component import
import ExampleComponent from './components/example-component.vue';

export default {
  // Component namn
 // name: 'app',
  components: {
    // Component registrering
    ExampleComponent
  },
  data(){
    return {
      // Component variabler
    };
  }
}
</script>

请注意，部分"kwitterBtn"和type之间有一个逗号

<br>
            <p>Vad händer?</p>
      <article>
            <form class = "userContainer">
              <div class = "div1">
                <img src="avatar/avatar-loggedin.jpg">
              </div>
                  <textarea rows = "5" cols = "50" name = "kweet_content">  </textarea>
              <p><button class = "kwitterBtn", type = "submit">Kwitter</button></p>
            </form>
    </article>
        <br>

，这是整个混乱的元凶。除去逗号后，一切都很好。

如何将外部Vue模板包含到HTML文件中

3 个答案: