问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

webstorm 打开vue项目一直提找不到@，但可以打开，如何解决？

头像
util
    3.2k97294326

    安装vue3之后（启用TS、JSX、pinia）但打开route.ts文件，一直报错提示：

    import HomeView from '../views/HomeView.vue'
import Transaction from "@/views/TransactionView.vue";

    在vite.config.js 文件中已经有写了at的别名 fileURLToPath(new URL('./src', import.meta.url))。

    import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

    安装选项
    一直报错提示
    已经加入了描述

    提示找不到，但实际上是存在的，并且webstorm里面点进去是可以打开对应的文件，但一直报红色。

    webstormvue3routervite
    阅读 2.4k
    avatarAI BotBETA

    针对你提到的问题，尽管你已经在 vite.config.js 中正确配置了 @ 的别名指向 src 目录，但 WebStorm 编辑器本身并不直接读取 Vite 的配置来解析这些别名。这导致编辑器在静态检查时无法识别 @ 符号，从而显示错误。

    为了解决这个问题，你可以在 WebStorm 中配置别名解析，以便它能够正确识别 @ 符号。以下是配置步骤：

    1. 打开 WebStorm 设置：

      • 在 Windows/Linux 上，通过 File > Settings 打开设置。
      • 在 macOS 上，通过 WebStorm > Preferences 打开设置。

    2. 导航到 JavaScript 相关的设置：

      • 在设置窗口中，选择 Languages & Frameworks > JavaScript。

    3. 配置别名：

      • 在 JavaScript 设置中，找到 Webpack 或 Vite（取决于你的 WebStorm 版本，有些版本可能直接支持 Vite，有些则可能通过 Webpack 的设置来兼容）。
      • 如果没有直接的 Vite 配置选项，你可以尝试在 Webpack 的配置中设置别名。对于 Vite，尽管实际配置不同，但很多 IDE 允许通过类似的方式设置别名。
      • 在 Webpack 下的 Resolve 部分，找到 Alias 字段。
      • 点击 + 添加一个新的别名，将 @ 映射到你的项目中的 src 目录路径。例如，如果你的项目根目录是 /path/to/your/project，那么 src 目录的路径可能是 /path/to/your/project/src。但是，由于 WebStorm 需要的是相对于项目根目录的路径，因此你只需要输入 src 作为别名值。

    4. 应用并关闭设置：

      • 应用更改并关闭设置窗口。
    5. 重启 WebStorm（有时需要重启 IDE 以使更改生效）。

    6. 检查是否解决问题：

      • 打开你的项目，查看之前报错的文件是否还显示错误。

    如果你正在使用的 WebStorm 版本不支持直接在设置中配置 Vite 的别名，或者上述方法不起作用，你可以尝试在项目根目录下创建一个 jsconfig.json 或 tsconfig.json 文件（取决于你的项目是否使用 TypeScript），并在其中配置别名。虽然这主要是为 TypeScript 或 JavaScript 编译器服务的，但某些情况下 WebStorm 也会读取这些配置来辅助路径解析。

    // tsconfig.json 或 jsconfig.json 示例
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}

    注意：确保你的 WebStorm 版本支持这些特性，并且你的项目结构符合配置的要求。如果问题仍然存在，检查是否有其他插件或设置可能干扰了路径解析。

    1 个回答
    得票最新
    头像头饰
    luofeii
      5131111

      新增一个 jsconfig.json 文件，然后重新打开试试：

      {
    "compilerOptions": {
        "paths": {
            "@/*": [
                "./src/*"
            ]
        }
    }
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏