Javascript VueJS无法打开带有“的主页”/&引用；路线_Javascript_Vue.js_Router

Javascript VueJS无法打开带有“的主页”/&引用；路线

javascript vue.js

Javascript VueJS无法打开带有“的主页”/&引用；路线,javascript,vue.js,router,Javascript,Vue.js,Router,我想显示一个带有h1文本的简单主页，但它不起作用。我配置了路由并将其添加到main.js。当我浏览到localhost:8080时，没有显示任何内容。我看不出它不起作用的原因 main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false new Vue({ el: '#app', router, compone

我想显示一个带有

h1

文本的简单主页，但它不起作用。我配置了路由并将其添加到

main.js

。当我浏览到

localhost:8080

时，没有显示任何内容。我看不出它不起作用的原因

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ]
})

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>client</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


客户
很抱歉，没有启用JavaScript，客户端无法正常工作。请使其继续。

@vue/cli

默认情况下仅使用vue运行时，而不使用（如果要使用内联模板字符串，则需要编译器）

要解决此问题，您可以在

vue.config.js

中：

module.exports = {
  "runtimeCompiler": true
};

或者将代码更改为使用

render（）

函数：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

顺便说一句，如果您使用的是

@vue/cli

，您可以在

vue创建过程中选择手动选择功能
当您选择Router
作为一项功能时，您将获得一个使用vue Router
启动的项目，该项目将立即运行。
控制台中是否出现任何错误？在ìndex.html
中是否有id为“app”的元素？在控制台上有一个警告：[Vue warn]：您使用的是Vue的仅运行时版本，而模板编译器不可用。将模板预编译为渲染函数，或使用编译器附带的版本。
。在index.html
上，我有一个由idapp
调用的元素，问题似乎是您使用了错误的Vue库（仅限运行时），但您需要完整版本。您是自己设置网页包配置还是使用vue cli？我已经用vue create client
创建了一个简单的项目。只是vue cli。我应该使用vue init webpack client
？不，vue create
是初始化vue项目的较新的首选变体。我想我发现了问题，我会很快写一个答案：）我的应用程序没有vue.config.js
文件，但选项2修复了我的问题。@Augusto@vue/cli
不会自动为您生成它，您需要手动创建vue.config.js文件。
module.exports = {
  "runtimeCompiler": true
};

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

new Vue({
  router,
  render: h => h(App)
}).$mount("#app")