【Vue】jsconfig.json compilerOptions 配置文件别名

最新推荐文章于 2025-04-28 08:45:37 发布

努力挣钱的小鑫

最新推荐文章于 2025-04-28 08:45:37 发布

阅读量205

点赞数

分类专栏： Vue.js 文章标签： vue.js json javascript ecmascript 前端

本文链接：https://blog.youkuaiyun.com/IAIPython/article/details/130571210

版权

Vue.js 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了VsCode中jsconfig.json文件的作用，它能为项目内的JavaScript代码提供个性化支持，如文件目录检索的智能提示。通过配置`baseUrl`和`paths`，可以实现模块路径的映射，简化导入语句。同时，`exclude`字段用于排除不想包含的文件夹，如`node_modules`和`dist`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

功能简单说明：可以对文件目录检索做智能提示。

jsconfig.json是什么？

如果你的项目中有一个 jsconfig.json 文件的话,这个文件的配置可以对你的文件所在目录下的所有js代码做出个性化支持。

参考文章

VsCode的jsconfig.json配置文件说明详解 vscode中的 jsconfig.json

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力挣钱的小鑫

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue基础Day_01学习+Vue项目创建报错(true` in `“vueCompilerOptions“` property)解决方案

qq_43372180的博客

05-22

5066

Vue学习Day_01.md文档

vscode中的 jsconfig.json

liu250696676的博客

07-02

1888

vscode中的 jsconfig.json 问题源头:webpack模板里import路径中@符号是什么意思? import ShuttleBoxfrom '@/components/ShuttleBox' jsconfig.json jsconfig.json配置什么是jsconfig.json? 目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。提示: 如果您不使用Ja

参与评论您还未登录，请先登录后发表或查看评论

vue项目中 jsconfig.json和tsconfig.json文件配置释义 & compilerOptions配置

weixin_44867717的博客

08-27

1万+

通俗作用——提高在写项目时舒适度的如果开发的项目根目录下没有 jsconfig.json，在默认情况下，像 VS Code，默认只会把 node_modules文件夹排除掉。当您在工作空间中有一个定义项目上下文的jsconfig.json文件时，JavaScript体验会得到改进。只要有可能，您应该使用不属于项目源代码的JavaScript文件排除文件夹。目录中存在tsconfig.json文件表明该目录是 TypeScript 项目的根目录。

在Laravel项目中为VueJS 3设置compilerOptions.isCustomElement

最新发布

qq_29715355的博客

04-28

344

在Laravel项目中使用VueJS 3时，若引入了提供自定义元素的JS文件，可能会遇到组件解析失败的控制台错误，提示需要通过将某些元素排除在组件解析之外。

jsconfig.json配置

qq_24418107的博客

03-29

1371

【代码】jsconfig.json配置。

vue中的compiler

vue

03-07

921

1、generate.js const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; //{{aaa}} export function generate(el) { console.log("-----------", el); //遍历树将树拼接成字符串 let children = genChildren(el); let code = `_c("${el.tag}",${ el.attrs.length ? genPro.

jsconfig.json 配置文件解析讲解

luckucu的博客

03-24

779

jsconfig.json 是一个强大的配置工具，可以显著提升 JavaScript 项目的开发体验。jsconfig.json 是一个配置文件，主要用于 JavaScript 项目，特别是在使用 Visual Studio Code (VS Code) 编辑器时。它的存在可以改善 VS Code 中的 JavaScript 开发体验，包括更好的智能感知、代码导航和重构等功能。虽然 jsconfig.json 可以极大地改善开发体验，但过于复杂的配置可能会影响 VS Code 的性能，特别是在大型项目中。

【React 】react 创建项目配置 jsconfig.json 的作用

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

08-03

1414

在 React 项目中，文件扮演着重要的角色，它主要用于配置 JavaScript 或 TypeScript 项目的根目录和其他一些选项，以帮助编辑器（如 VS Code）更好地理解项目的结构和提供智能提示。对于熟悉 Vue 的前端工程师来说，这个概念类似于 Vue 项目中的或者（对于 TypeScript 项目）。

vue项目中 jsconfig.json是什么

segegefe的博客

07-31

739

目录中存在tsconfig.json文件表明该目录是TypeScript项目的根目录。该tsconfig.json文件指定编译项目所需的根文件和编译器选项。JavaScript项目可以使用jsconfig.json文件来代替，它的作用几乎相同，但默认启用了一些与JavaScript相关的编译器标志。以上就是今天总结jsconfig.json的内容，本文仅仅简单介绍了jsconfig.json的一些基本配置，而jsconfig.json提供了大量能使我们快速便捷提高代码效率的方法。...

vue 项目中 jsconfig.json 概念及使用步骤

2301_80826038的博客

09-09

1973

这篇文章主要介绍了vue项目中 jsconfig.json是什么,本文仅仅简单介绍了 jsconfig .json 的一些基本配置，而 jsconfig .json提供了大量能使我们快速便捷提高代码效率的方法，需要的朋友可以参考下

vue3 jsconfig.json

09-15

在Vue 3项目中，可以使用jsconfig.json文件来配置JavaScript的一些相关设置。jsconfig.json和tsconfig.json的作用相似，但默认启用了一些与JavaScript相关的编译器标志。它可以帮助我们更好地管理项目中的JavaScript...

jsconfig.json 配置模板

阿臻

03-16

1567

关于compilerOptions属性文档的解释: 不要被compilerOptions所迷惑，因为JavaScript并不需要实际的编译。这个属性的存在是因为jsconfig。Json是tsconfig的后代。json，用于编译TypeScript。这个属性在 js 项目里面能用到的是 "baseUrl": ".", "paths": { "@/*": ["src/*"] }, 用来做 webpack 别名映射 { "compilerOptions": { "baseUrl": "."

vue项目构建之jsconfig.json作用

weixin_43845137的博客

02-15

9734

目录vue项目构建之jsconfig.json作用VScode的配置 vue项目构建之jsconfig.json作用由于webpack别名配置好以后，如果想要在vscold中可以正确提示路径，就需要配置jsconfig.json文件：再项目目录下创建jsconfig.json文件 { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@components/*": ["sr

tsconfig.json中设置“paths“: { “@/*“: [“src/*“] }不生效问题

weixin_70394181的博客

07-06

1832

在写项目时配置别名时，在tsconfig.json配置路径提示不生效。配置文件,找到配置项 compilerOptions 添加配置,这是在tsconfig.json的配置，配置并不生效。在vite.config.ts中配置了别名。找到tsconfig.app.json。

Target version not match, you can specify the target version in vueCompilerOptions.target in tsconfi

热门推荐

莫循的AI编程博客

10-11

1万+

Target version not match, you can specify the target version in vueCompilerOptions.target in tsconfig.json / jsconfig.json. (expected "target": 2.7)

关于vscode开发uni-app中依赖@uni-helper/uni-app-types的配置 “vueCompilerOptions“不允许属性 nativeTags问题解决

qq_45937792的博客

05-29

6890

vscode开发uniapp+vue3+ts使用@uni-helper/uni-app-types时tsconfig.json中的 "vueCompilerOptions"属性配置问题

一份关于vue-cli3项目常用项配置

油墨香^-^的博客

02-23

356

配置全局cdn，包含js、css开启Gzip压缩，包含文件js、css去掉注释、去掉console.log压缩图片本地代理设置别名，vscode也能识别配置环境变量开发模式、测试模式、生产模式请求路由动态添加axios配置添加mock数据配置全局less只打包改变的文件开启分析打包日志。

jsconfig.json是什么？vscode配置了jsconfig.json就能提示文件路劲，提升开发效率

weixin_44038355的博客

08-24

1312

{ "compilerOptions": { "target": "es2017", "baseUrl": "./", "paths": { "@components/*": ["src/components/*"], "@imgs/*": ["src/imgs/*"], "@pages/*": ["src/pages/*"], "@redux/*": ["src/redux/*"], "@routers/*": ["s

jsconfig.json配置文件

03-28

### 关于 `jsconfig.json` 的配置和使用 #### 什么是 `jsconfig.json`？ `jsconfig.json` 是 JavaScript 项目中的一个配置文件，用于帮助编辑器（如 VSCode）更好地理解项目的结构和模块依赖关系。它类似于 TypeScript 中的 `tsconfig.json` 文件，但在纯 JavaScript 项目中起作用[^2]。 --- #### `jsconfig.json` 的主要用途 1. **路径别名支持** 使用 `baseUrl` 和 `paths` 属性可以定义自定义路径映射，从而简化导入语句。例如，在 Vue 或 React 项目中，可以通过设置路径别名让 `@/components/Header` 替代相对路径 `../../components/Header`。 2. **排除特定目录** 利用 `exclude` 属性指定不需要被解析的目录或文件，比如第三方库所在的 `node_modules` 或打包后的 `dist` 目录。 3. **增强 IntelliSense 功能** 提供更强大的代码补全功能，尤其是在大型项目中有多个子模块的情况下，能够显著提升开发体验。 4. **多工作区支持** 如果项目由多个独立的工作空间组成，则可通过此文件统一管理这些工作区之间的依赖关系。 --- #### 如何配置 `jsconfig.json` 以下是典型的 `jsconfig.json` 配置示例及其解释： ```json { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": [ "node_modules", "dist" ] } ``` - `"baseUrl"`：设定基础目录，默认为当前项目根目录 (`./`)。这意味着所有的路径都相对于该目录计算[^4]。 - `"paths"`：定义路径别名规则。上述例子表示任何以 `@/...` 开始的模块都会被替换为 `src/...` 下的实际位置。 - `"exclude"`：列举不参与编译或分析的文件夹列表。通常会忽略掉外部依赖项(`node_modules`)以及构建产物存储区域(`dist`)等内容。 --- #### 实际应用场景举例假设存在如下目录结构： ``` project/ ├── src/ │ ├── components/ │ │ └── Header.js │ └── utils/ │ └── helper.js └── node_modules/ ``` 如果希望在其他地方通过简单的方式引入组件或者工具函数，可以在 `jsconfig.json` 添加以下内容： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@c/*": ["src/components/*"], "@u/*": ["src/utils/*"] } }, "exclude": ["node_modules", "build"] } ``` 之后就可以这样写 import 声明了： ```javascript import Header from '@c/Header'; // 等价于 './src/components/Header' import Helper from '@u/helper'; // 等价于 './src/utils/helper' ``` 这种做法不仅提高了可读性和维护便利度，还减少了因频繁调整嵌套层次而引发错误的可能性。 --- #### 注意事项尽管 `jsconfig.json` 能够极大地改善开发者体验，但它仅影响 IDE 行为，并不会改变运行时逻辑。因此还需要确保 Webpack/Babel/Vite 等实际使用的构建工具有相应的插件来识别并处理这些别名配置[^3]。 ---