首页 > 其他分享 >新建next.js项目,customize the default import alias是否要自定义默认导入别名(@/*)的选项区别

新建next.js项目,customize the default import alias是否要自定义默认导入别名(@/*)的选项区别

时间:2024-10-17 15:45:01浏览次数:8  
标签:src 自定义 No default 别名 js 导入

使用命令 npx create-next-app@latest 新建项目时,会自定义一些选项,如下图:

其中自定义导入别名的选项,选择Yes 或 No 有何区别?
Would you like to customize the default import alias (@/*)? ... No / Yes

一、选择 "Yes"

jsconfig.js 文件的内容是:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

例如,有一个位于 src/components/layout.js 的文件,你可以使用 import Layout from '@/components/layout' 来导入。

二、选择 "No"

jsconfig.js 文件的内容是:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

这种情况下,只能使用相对路径或者绝对路径导入文件。

三、如何配置导入别名

导入别名的设置并非必须项。当项目结构较为复杂时,设置导入别名可便捷开发。即使创建项目时,选择了"No",后续也可以通过修改jsconfig.js文件来重新定义导入别名,还可以增加其他别名设置。案例如下:

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

标签:src,自定义,No,default,别名,js,导入
From: https://www.cnblogs.com/amnesia999/p/18472453

相关文章

  • Vue.js 组件开发基本步骤
    Vue.js是一个构建用户界面的渐进式框架,它被设计为能够轻松地被集成进项目的部分功能,或者用于构建完整的前端应用。组件化是Vue.js的核心概念之一,它允许开发者将界面拆分成独立、可复用的组件,每个组件负责应用中的一小部分功能。以下是Vue.js组件开发的一些基本步骤:......
  • el-table自定义表头新
    <el-table-columnprop="address"label="333333"min-width="180":show-overflow-tooltip="true"><templateslot......
  • 【Next.js 项目实战系列】07-分配 Issue 给用户
    原文链接CSDN的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话,给我的库点个star,关注一下吧 上一篇【Next.js项目实战系列】06-身份验证分配Issue给用户本节代码链接SelectButton​#/app/issues/[id]/AssigneeSelect.tsx"useclient";import{Sel......
  • 基于Node.js+vue钢材销售平台(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于钢材销售平台的研究,现有研究主要以传统销售模式为主,对于利用现代信息技术构建专门的钢材销售平台的研究较少。在国内外,传统钢材销售面临着流程繁琐......
  • 基于Node.js+vue个人理财微服务系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于个人理财微服务系统的研究,现有研究主要集中在传统理财系统的整体架构和功能实现上。在国内外,传统理财系统已经有了较为成熟的开发模式和功能模块,但......
  • 基于Node.js+vue短视频推荐系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景随着互联网的迅速发展,短视频行业蓬勃兴起。关于短视频推荐的研究,现有研究主要以用户行为分析和通用推荐算法为主 1。专门针对短视频这一特殊媒体形式,结......
  • 9 个 Node.js 最佳实践原则!
    你好,前端开发爱好者。Node.js是现代应用开发的基石之一,超过630万网站和无数API使用Node.js。Node.js以事件驱动的架构为核心,支持高并发和非阻塞I/O操作,是构建高性能应用的理想选择。虽然它功能强大,但有效管理和扩展Node.js应用需要丰富的经验。今天的文章中总......
  • 基于Node.js+vue高中生心理健康管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景高中生心理健康问题一直是教育领域和社会关注的焦点。随着社会竞争的加剧和学业压力的增大,高中生面临的心理压力也日益增加。近年来,国内外关于高中生心理健......
  • 基于Node.js+vue辅导员职责信息管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景辅导员职责信息管理系统的设计与开发,旨在提高辅导员工作效率,优化学生管理流程。当前,关于辅导员职责信息管理的研究主要集中在辅导员工作流程的优化、学生信......
  • jsp东哈驾校管理系统的设计与实现dy35m(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表学员,教练,报名登记,退学登记,练车预约,考试预约,报考信息,报考反馈,成绩信息开题报告内容一、项目背景随着汽车保有量的不断增加,驾驶培训行业迎来了巨大的发......