Vue.js 项目找不到相对模块？一文解决！

vue.js

2024-03-27 13:17:11

在构建 Vue.js 项目时，"找不到相对模块"错误是一个常见的痛点。本文将深入探讨此问题的原因并提供一系列解决方案，帮助你解决这一问题。

问题原因

该错误表示 Webpack 无法找到模块（例如 app.vue）相对于另一个模块（例如 main.ts）的路径。

解决方法

检查模块路径： 确保模块位于同一目录或子目录中。
更新依赖项： 更新 Vue.js、Webpack 和 TypeScript 版本。
删除并重新安装依赖项： 删除 node_modules 文件夹和 package-lock.json 文件，然后重新运行 npm install。
检查 TypeScript 配置： 确保 tsconfig.json 中 paths 和 baseUrl 属性正确配置。
检查 Webpack 配置： 在 webpack.config.js 中，验证 resolve.modules 和 resolve.extensions 属性的设置。
确保 CSS 中的路径正确： 检查 App.vue 中 CSS 导入语句，确保其指向正确的样式文件。

示例

以下示例代码演示了正确的配置：

main.ts：

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

Vue.config.productionTip = false;

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

App.vue：

<template>
  <div id="app">
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class App extends Vue {}
</script>

<style lang="scss">
@import "./styles/main.scss";
</style>