无法从我的路由器文件中解析组件 vue 文件

Question

我的组件vue文件在src/components/，而我的index.js路由器文件(其内容在下面(在src/router/。

为什么我会收到"错误：无法解决'./components/App.vue'"错误？

import Vue from 'vue';
import App from './components/App.vue';
import SignUp from './components/SignUp.vue';
import Login from './components/Login.vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: App
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: 'signup',
name: 'SignUp',
component: SignUp
},
]
});

Answer 1

如果您的index.js在src/router/并且您的组件在src/components它们不在同一个文件夹中。因此，为了正确导入，您必须将引用../降低到/src/。

它看起来像这样：

import Vue from 'vue';
import App from '../components/App.vue';
import SignUp from '../components/SignUp.vue';
import Login from '../components/Login.vue';

Answer 2

./

除了当前文件夹作为相对路径之外没有特殊含义;文件夹结构为：

|-src
|-components
|-App.vue
|-router
|-index.js

您可以使用从当前路径备份一个级别的../：

import App from '../components/App.vue';

或者使用引用src文件夹的@：

import App from '@/components/App.vue';