前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >next 引入路径修改为@

next 引入路径修改为@

作者头像
我乃小神神
发布于 2021-12-07 05:51:38
发布于 2021-12-07 05:51:38
1.5K00
代码可运行
举报
文章被收录于专栏:前端基础前端基础
运行总次数:0
代码可运行

当前项目结构预览

  • 正常效果
  • 想要达成的效果
  • 新建 jsconfig.json 写入如下代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": [
          "./*"
        ],
      }
    }
  }
  • 再新建 next.config.js 写入如下代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = require("path");
module.exports = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname);
    return config;
  },
};
  • OK,完成了,牛逼PLUS
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/08/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React系列:配置@别名路径并配置联想
知识浅谈
2023/12/19
6630
React系列:配置@别名路径并配置联想
深入理解 TypeScript Path Aliases 及其实践应用
在 Web 前端开发中,随着项目规模的增大,代码的模块化和可读性需求日益增强。TypeScript 提供了一种称为 Path Aliases 的功能,可以通过别名简化模块导入路径,从而提升开发效率和代码的可维护性。
编程小妖女
2025/01/01
1000
深入理解 TypeScript Path Aliases 及其实践应用
Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决
最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。
solocoder
2022/04/06
2.1K0
正确的Webpack配置姿势,快速启动各式框架!
在去年的这个时候,本骚年还在被Grunt和Gulp以及各种Requirejs、Seajs团团围住攻击,狼狈不堪。后面认识了Webpack之后,基本所有项目框架都拿它来构建了。
腾讯NEXT学位
2019/02/15
1.6K0
Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决
最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。
全栈程序员站长
2021/07/07
2.8K0
快速配置webpack多入口脚手架
当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便,而且当多人开发时,我们希望所有的开发代码都在一个git目录下,这时就有了对webpack进行配置的需求,当有些页面需要多入口时,我们又产生了对多入口配置的需求,这里提供一种配置方案,希望能帮助到有需要的人,废话不多说,我们开始吧!
吴裕超
2019/01/02
9360
React-Webpack5-TypeScript打造工程化多页面应用
所谓的单页面应用也就是说打包后的代码仅仅生成一份html文件,基于前端路由js去控制渲染不同的页面。
19组清风
2021/11/15
2.1K0
React-Webpack5-TypeScript打造工程化多页面应用
Vue + TypeScript 踩坑总结
vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点。 另外,使用本文前可以先看vue 官方文档关于 typescript 的使用讲解
xing.org1^
2019/12/12
5.3K0
vue-cli3-项目出现跨域解决方法
使用vue-cli3搭建脚手架时,没有以前的webpack配置文件,一些配置列如跨域,alias无法配置,这时候在项目目录下新建一个vue.config.js即可。
用户10106350
2022/10/28
2420
taro别名引入路径方式
在config/index.js 文件中添加节点 const path = require('path'); const config = { alias: { '@components': path.resolve(__dirname, '..', 'src/components'), '@utils': path.resolve(__dirname, '..', 'src/utils') } } 如上配置,编译可以通过,但是vscode编辑器爆红。解决办法在tsconfi
用户1437675
2019/06/11
1.8K0
初探webpack之从零搭建Vue开发环境
平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码,但这会造成我们过度依赖vue-cli,忽视了webpack的重要性,当遇到一些特殊场景时候,例如Vue多入口的配置、优化项目的打包速度等等时可能会无从下手。当然现在才开始学习vue2 + webpack可能有点晚,毕竟现在都在考虑转移到vue3 + vite了哈哈。
WindRunnerMax
2021/10/20
1.2K1
腾讯 IMWeb 团队的前端构建秘籍
本文由 IMWeb 团队成员 eden 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 前言 随着前端构架工具的不断发展,提供了很多提高我们的开发体验和开发效率的能力,同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员,早期的 webpack 配置复杂难懂,随着其发展,相关配置也不断简化,性能也不断提高,但是对于深入使用的开发人员,通常它的默认配置并不适用于业务开发,需要针对自己业务调整适配。 你对 webpack 了解多少?如何针对业务
用户1097444
2022/06/29
1.5K0
腾讯 IMWeb 团队的前端构建秘籍
react+electron使应用窗口相互独立
前两篇文章我们介绍了react+electron构建桌面应用和如何加载本地的静态资源。然后现在有个需求,是要使应用里的弹窗独立于主窗口,今天来实现这个需求。
winty
2020/08/24
1.8K1
react+electron使应用窗口相互独立
写给前端新人:从 0到1 搭建一个前端项目,都需要做什么?
本案例使用脚手架 create-react-app 初始化了项目。此脚手架有利有弊吧,项目目录结构简洁,不需要太关心 webpack 令人头疼的配置;弊端在于,脚手架确实有些庞大,构建时间在 4mins 左右。各位看官择优选择吧,也可以完全自己搭建一个项目。
zz_jesse
2021/06/01
5.3K0
Vue-cli搭建的项目中路径别名的配置
使用cli3.x创建的项目在配置路径别名时可以使用@代表src,在node_modules/@vue/cli-service/lib/config/base.js文件中已经配置好的
peng_tianyu
2022/12/15
8050
Vue-cli搭建的项目中路径别名的配置
webpack5构建一个小型简单vue项目 (练习)
webpack5构建vue 必要环境 安装ndejs 我们需要安装node 如果没有安装则安装 安装过则跳过 下载安装nodejs 执行 node -v npm -v [在这里插入图片描述] 初始化项目文件夹 新建一个空的项目 执行 npm init -y 初始化 npm init -y 会生成一个package.json [在这里插入图片描述] 安装webpack以及 html-webpack-plugin 控制台执行 npm i webpack webpack-cli webpack-dev-serv
代码哈士奇
2022/01/31
1K1
TypeScript在react项目中的实践
前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的实践以后,尝到了TS所带来的甜头,毫不犹豫的选择用TS+React来重构这个项目。 这次的重构不仅包括Node的重构(之前是Express的项目),同时还包括前端的重构(之前是由jQuery驱动的多页应用)。
贾顺名
2019/12/09
1.8K0
vue3+element-plus+router+vuex+axios从零开始搭建(2)
vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化,这也带来了许多问题,很多配置需要自己配置,
solate
2021/06/21
1.5K0
重学webpack4之构建速度提升和体积优化
5.执行npm run build,发现那些被拆分的包,没有打进业务代码中,符合预期
疯狂的技术宅
2020/12/15
1.2K0
重学webpack4之构建速度提升和体积优化
webpack5 + webpack-chain 构建一个大型应用系列 2(附 vscode 跟 prettier 配置)
笔者使用了 webpack5 将项目进行了重构,并全程使用的 webpack-chain 来配置 webpack,每个功能也都是独立文件,可单独使用。因此该项目的配置可以在任何项目中被使用。此项目可实战亦可当成 webpack 手册来学习。我开发这个项目的目的就是无论你是新手还是有经验的大佬都可以从中有所收获。此项目为想学 webpack 的同学提供了很好的实战平台,每一个 插件 每一个 loader 都会有详细的讲解及使用背景。
null仔
2020/03/02
4.1K0
相关推荐
React系列:配置@别名路径并配置联想
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验