javascript - vue.js 项目中没有任何渲染
问题描述
使用 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";
`,
},
},
},
};
主页.vue:
<template>
<h1>Home page</h1>
</template>
<script>
export default {
name: 'home',
};
</script>
解决方案
如果你使用 vue-cli,你不应该填充 vue.config.js - 作为一个新的开始 - 因此你的配置很有可能是错误的。
推荐阅读
- java - JpaSystemException:无法提取结果集
- python - 当另一个 td 包含某些文本时,Selenium Python 选择第 n 个 td
- reactjs - 如何根据设备大小/分辨率制作 Konva-React 响应式(缩放)画布?
- swift - 检索具有多个案例的类字符串
- c++ - 为什么 QtCreator 和 MSVC 使用 QT VS 工具生成的代码不同?
- ssl - 如何将自签名证书与 Web 套接字一起使用
- git - 此存储库已超过其数据配额。负责 LFS 带宽的帐户应购买更多数据包以恢复访问
- python - 了解 PyTorch 的实现
- python - async - 一个任务调用多个并发任务
- typescript - 如何正确键入调用另一个函数并传递可变数量参数的函数