vue.js 项目中没有任何渲染

Question

使用 Vue CLI 3 创建一个新的 Vue 项目并删除所有默认视图和组件后，我创建了两个新视图。更改网址时它们都没有出现，而是我看到空白页面并且控制台中没有错误。在 Chrome DevTools 检查器中，我看到 <div id="app"></div> 是空的。 Vue.js Devtools 插件根本不会在页面上触发 Vue。我想我可能会错过我的设置中的某些内容，但找不到可能导致这种行为的原因。

这是我的 main.js：

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

Vue.config.productionTip = false;

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

这是我的 App.vue：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

这是路由器的 index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Auth from '../views/Auth.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/auth',
    name: 'auth',
    component: Auth,
  },
];

const router = new VueRouter({
  mode: 'history',
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  base: process.env.BASE_URL,
  routes,
});

export default router;

这是 vue.config.js

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel-loader')
      .loader('vue-loader')
      .tap(options => {
        return options;
      });
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
        @import "@/assets/styles/variables.scss";
        @import "@/assets/styles/global.scss";
        `,
      },
    },
  },
};

Home.vue:

<template>
  <h1>Home page</h1>
</template>

<script>
export default {
  name: 'home',
};
</script>

Answer 1

如果你使用 vue-cli，你不应该填充 vue.config.js - 作为一个新的开始 - 因此你的配置很有可能是错误的。