Vue路由器放在文件夹中时找不到模块

Question

我有 vue 路由器，当我将它直接放在 src 文件夹中时它可以工作，但当我将它放在 src 目录内的文件夹中时它不起作用。

这是我的代码，当我将 vue-router 文件放在 src 文件夹旁边时，它的字词完美。

import Vue from 'vue';
import Router from 'vue-router';

import HelloWorld from './components/HelloWorld.Vue';

Vue.use(Router);

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

我的 main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';
//import router from './router.js';

import './assets/app.scss';
import jQuery from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

import 'popper.js';
import 'bootstrap';


Vue.config.productionTip = false

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

这是我的文件夹结构。

这是错误。

./src/router/index.js
Module not found: Error: Can't resolve './components/HelloWorld.Vue' in 'C:\xampp\htdocs\sales-and-inventory\frontend\src\router'

Answer 1

这是因为./ 在文件所在的文件夹中查找。 所以它目前试图找到的路径是C:/path/to/project/src/router/components/HelloWorld.Vue

改为将路径更改为../components/HelloWorld.Vue，它应该可以工作。