uniapp/vue项目 import 导入文件时提示Module is not installed,‘@/views/xxx‘路径无法追踪

文章目录

前往闪闪の小窝以获得更好的阅读评论体验

背景

Vue3在我自学Vue的时候看过一点,实操过一点,但是太久没用很多知识点都已经忘光光了,uniapp主要是以前学过微信小程序所以其实这些大部分知识点都相通所以没什么迁移门槛......我习惯用webstorm,方法、组件之间可以跳转,有类似这种写法可能造成死循环之类的问题提示,比起VS Code、HBulider X这种文本编辑器来说还是好用很多,效率也高很多(前端因为用VS Code造成的各种问题详见这篇博文,简单讲就是我认为一款好用的IDE可以提高一些编码习惯不好的同学提高TA编码质量的下限)

这次就是因为我加入了一个uniapp项目,用webstorm打开发现许多方法或组件都无法正确跳转过去,在写代码的时候有点难受,最终决定进行排查,但是百度搜出来的解决方案和chatGPT给出的解决方案都不太对,最终还是翻了好多文章给了chatGPT足够的前置条件后找到了原因

解决方案

1.IDE配置

首先,这个问题的根本原因是IDE没识别到@指定的路径是哪个,通常,在项目的配置文件中会默认配置alias,因此,我们需要去确认一下当前项目的配置

有些说法是说IDE的设置这边没有设置正确的配置文件路径会导致就算配置都正确,也找不到对应路径

但是新版的idea或webstorm都支持自动识别了,所以如果你用新版还有这样的问题就可以先排除是IDE的问题了

2.alias(别名)配置

接下来我们继续检查项目配置中是否有包含alias配置,不同的打包配置工具对应的打包配置文件名跟写法也不太一样

webpack

``

js 复制代码
const path = require('path');
 
module.exports = {
  // ...
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
      // 你可以根据需要添加更多别名
    },
  },
  // ...
};

vue-cli

vue-cli1,vue-cli2项目的写法(实测cli4也能正常使用)vue.config.js中是这样配置的:

js 复制代码
// vue.config.js
module.exports = {
  chainWebpack(config) {
    ...
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('utils', resolve('./src/utils'))
    ...
  }
}

vue-cli3,vue-cli4项目的写法:

js 复制代码
// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), // 将'@'设置为项目src目录的别名
        'components': path.resolve(__dirname, 'src/components'), // 将'components'设置为src/components目录的别名
        // 可以继续添加更多别名
      }
    }
  }
}

vite

vite.config.js

js 复制代码
import path from 'path';
import { defineConfig, loadEnv } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
import uni from '@dcloudio/vite-plugin-uni';

import injectEnvVarPlugin from './src/plugins/vite/inject-env-var-plugin';
import autoImportWdCmpPlugin from './src/plugins/vite/auto-import-wd-cmp-plugin';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
	const env = loadEnv(mode, process.cwd());
	return {
		plugins: [autoImportWdCmpPlugin(), uni(), vueJsx(), injectEnvVarPlugin(env)],
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'src')
			}
		}
	};
});

3.检查 jsconfig.json 或 tsconfig.json

检查jsconfig.jsontsconfig.json

如果你的项目中还没有这两个文件,可以创建一个jsconfig.json文件,内容如下:

json 复制代码
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}

包含jsconfig.json后,IDE就会在你写的js中识别到配置信息,ts同理,如果你有写ts,记得创建一个tsconfig.json,内容一样即可。

原因如下:

在前端项目中,像jsconfig.jsontsconfig.json文件的作用是帮助开发工具(如 WebStorm、VSCode)理解项目的目录结构、路径别名等配置。虽然 Vite 本身能处理路径别名(如 @ 指向 src),但 IDE 并不直接读取 Vite 的配置,而是依赖于jsconfig.jsontsconfig.json来解析别名。有些工具会使用不同的配置来解析路径(如 Webpack、Vite、Babel 等)。添加jsconfig.jsontsconfig.json统一了路径解析的方式,确保所有工具都遵循同样的规则,减少路径冲突的可能。

写在最后

哥们毕竟不是专业前端,有错误的地方还请见谅

相关推荐
花花鱼3 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09337 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
阿伟来咯~23 分钟前
一些 uniapp相关bug
uni-app·bug
EricWang135828 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning28 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人38 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员