Vue-Router 不存在的模块错误的解决方法

2023-03-31 23:45:00

解决 "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-router.js?v=9eef87ba' " 错误的全面指南

问题简介

当你在使用 Vue.js 和 Vue-Router 时，你可能会遇到 "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-router.js?v=9eef87ba' " 错误。该错误意味着 Vue 无法正确解析 Vue-Router 模块，从而导致路由功能出现问题。

根源分析

此错误通常由以下原因引起：

Vue-Router 库未正确安装
Vue-Router 模块未正确引入
Webpack、Vite 或 Rollup 等打包工具的配置不当

解决步骤

解决此错误的步骤如下：

1. 确保 Vue-Router 已安装

在终端中运行以下命令：

npm install vue-router

2. 正确引入 Vue-Router

在你的项目入口文件中，确保以下代码已正确引入：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置
})

3. 检查 Webpack 配置

对于使用 Webpack 的项目：

module.exports = {
  // ...
  resolve: {
    alias: {
      // 映射 Vue-Router 到 node_modules/.vite/deps/vue-router.js
      'vue-router': 'node_modules/.vite/deps/vue-router.js'
    }
  }
  // ...
}

4. 检查 Vite 配置

对于使用 Vite 的项目：

// vite.config.js
export default defineConfig({
  // ...
  resolve: {
    alias: {
      // 映射 Vue-Router 到 node_modules/.vite/deps/vue-router.js
      'vue-router': 'node_modules/.vite/deps/vue-router.js'
    }
  }
  // ...
})

5. 检查 Rollup 配置

对于使用 Rollup 的项目：

// rollup.config.js
import vue from 'rollup-plugin-vue'

export default {
  // ...
  plugins: [
    vue({
      // 映射 Vue-Router 到 node_modules/.vite/deps/vue-router.js
      alias: {
        'vue-router': 'node_modules/.vite/deps/vue-router.js'
      }
    })
  ]
  // ...
}