Question

我想用vue2分析我项目的当前路由器配置。因为我想用cli来生成一个vue组件。在此之前，我必须加载当前的路由注册信息。但是当我在路由器目录下需要router.js时。节点抛出<div class="loader"> <div class="circles"> <span class="one"></span> <span class="two"></span> <span class="three"></span> </div> <div class="pacman"> <span class="top"></span> <span class="bottom"></span> <span class="left"></span> <div class="eye"></div> </div> </div>。我尝试了许多方法来修复它，但它们没有用。请告诉我加载路由器配置的正确方法。谢谢！


    //to load router config
    const routerPath = path.join(process.cwd(), 'src', 'router', 'index.js');

    if (existsSync(routerPath)) {
        routes = require(routerPath)
    }

    //error
    import Vue from "vue";
    ^^^^^^

    SyntaxError: Unexpected token import
        at Object. (/Users/mosx/projects/mjb-cli/lib/check-components.js:28:33)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object. (/Users/mosx/projects/mjb-cli/bin/mjb-component:12:25)
        at Module._compile (module.js:570:32)

    // path/to/router/index.js
    import Router from "vue-router";
    import Hello from "../components/Hello.vue";

    Vue.use(Router);

    export default new Router({
        routes: [
            {
                path: '/',
                name: 'Hello',
                component: Hello,
                children: [
                    {
                        path: 'child',
                        name: 'child',
                        component: Hello
                    }
                ]
            }

        ]
    })

Answer 1

虽然问题中发布的代码的模块性值得怀疑，我相信我的答案可以解决你所面临的问题。
这就是..

为了构建以下代码，我使用了vue样板

vue init webpack-simple vue-cli

然后，我安装了vue-router软件包

npm install --save vue-router

Main.js文件

import Vue from 'vue';
import {routes} from './routes';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);
const router = new VueRouter({
  routes : routes,
  mode : 'history'
})

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

Route.js文件

import Cricket from './components/Cricket.vue';
import Football from './components/Football.vue';
import Basketball from './components/Basketball.vue';
import Sports from './components/Sports.vue';
export const routes = [
    {
        path: '/cricket',
        component: Cricket
    },
    {
        path: '/football',
        component: Football
    },
    {
        path: '/basketball',
        component: Basketball
    },
    {
        path: '',
        component: Sports
    }
];

如何使用node.js加载vue项目的.vue文件

1 个答案: