在JavaScript文件中导入Vue路由器会导致“模块解析失败”错误

Question

[我试图访问axios的拦截器中的路由器，但是当我将文件导入.js Axios文件中时，发生错误

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <template>

。

这里是router.js文件的示例：

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

Vue.use(Router);

const router = {
     base: process.env.BASE_URL,
     routes: [
          {
               path: "/settings",
               name: "settings",
               component: require('@/views/Settings.vue'),
          }
     ]
};
export default new Router(router);

并且拦截器文件包含：

import router from './router';

Answer 1

您为什么使用require('@/views/Settings.vue')？

而是尝试使用import功能。

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

Vue.use(Router);

const router = {
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/settings',
      name: 'settings',
      component: () => import('@/views/Settings.vue'),
    },
  ],
};
export default new Router(router);

PS：回答您的评论。在main.js文件中导出实例变量：

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

Vue.config.productionTip = false;

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

export default vm; // ATENTION HERE

在axios.js文件中，导入main.js并访问$router：

import vm from './main.js';
...
  // YOUR INTERCEPTOR
  vm.$router.push({ name: 'settings' });
...