代码编织梦想

以下面这个目录结构为例:
在这里插入图片描述
以vite为例,webpack也一样,vite.config.ts:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
            '~': path.resolve(__dirname, './packages'),
            // '@': '/src',
            // '~': '/packages',
        }
    }
})

在这里配置打包编译时候的别名,用path.resolve解析成绝对地址也可以,用'@': '/src'直接指定项目根路径也可以。用js的时候,配置别名就完成了。如果用TS还需要,配置tsconfig.json:

	"baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "~/*": [
        "packages/*"
      ]
    }

ts路径设置规则
外注意有没有安装@types/node

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_32594913/article/details/129629621

Ts+Cra项目 文件路径别名不生效问题-爱代码爱编程

在配置完成启动项目时发现,tsconfig.json中的paths配置项被删除。 导致编译时一直找不到文件 经过一番查找,后来得知原因可能是项目启动时tsconfig.json被重写。 避免重写的办法: 新建一个ts.paths.json文件,内容如下: { "compilerOptions":{ "paths": {

vue项目使用ts识别别名@-爱代码爱编程

在tsconfig.json文件中加入 "paths": { "baseUrl": ".", "@/*": ["src/*"] } 完整配置 //vite.config.ts resolve: { alias: { '@': resolve('src'),

React + ts + eslint 项目配置路径别名-爱代码爱编程

提交本地代码(避坑,npm run eject 时会报错)npm run eject => 暴露webpack.config.js(react脚手架默认将webpack配置隐藏起来,此操作不可逆)config文件夹下 webpack.config.js文件// 大致 327 行 alias:{ // ... '@': path.resolve(_

怎么在ts中配置路径别名使用@-爱代码爱编程

第一大步骤:1.下包  npm i @craco/craco  2.在项目根目录下创建配置文件craco.config.js,并在里面配置路径别名 核心代码 const path = require('path') module.exports = { // webpack 配置 webpack: { // 配置别名 ali

vue3+vite+ts 自定义项目别名_未末之初的博客-爱代码爱编程

默认配置文件内容如下 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()] }) 1.使用resolve

react+ts项目中配置路径别名和提示_shbi131xx的博客-爱代码爱编程

为了方便使用,希望使@符号代表src文件路径 步骤1 下载依赖包 npm i @craco/craco -D 步骤2:配置craco.config.js 在跟目录下创建craco.config.js //对webpack配置别名 const path = require('path') module.exports = { // w

react项目、ts+react项目配置别名(alias)_@二十六的博客-爱代码爱编程

普通React项目配置别名 + (TS&React)项目配置别名 1 说明 在Vue项目当中,我们知道可以使用 @ 来表示 src/, 但是在React项目当中,却没有这个功能,但是我们可以进行手动的配置来实现此功能。 再比如,我们开发了一些公共的hooks,如果每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候我们可以配置一个

【vue】vite + ts 配置别名_文艺倾年的博客-爱代码爱编程

1.vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import {resolve} from 'path' function _resolve(dir: string) { return resolve(__dirnam

vite ( vue + ts ) 项目配置 @ 路径别名_jingpengzhang的博客-爱代码爱编程

1. 下载 @types/node 包 path 模块是 node.js 的内置模块,而 node.js 默认不支持 ts 文件的,所以需要安装 @type/node 依赖包 npm install @types/node --save-dev 2. 修改 vite.config.ts 文件 在相应位置增加如下代码 import {resolv

vite在项目中配置路径别名_影风莫的博客-爱代码爱编程

vite 加 vue3项目中报错Cannot find module 'XXXXXX ’ or its corresponding type declarations 我们只需要在以下几个文件里面配置: vite.con

vite+ts配置项目路径别名_小虎~的博客-爱代码爱编程

webpack中可以通过resolve.alias定义项目路径别名,这样可以在引入文件时,不再需要使用相对路径,统一以根路径(/src/)作为起点。vite也可以定义路径别名 vite.config.ts resolve.alias 配置 import { defineConfig } from 'vite' import react from '@

webpack+ts+vue 在ts文件中使用路径别名报错-爱代码爱编程

在TS中引用路径别名提示找不到模块或者相应的声明 ts文件中使用webpack配置好的路径别名,出现报错 在vue中,正常情况下都是在webpack的webpack.config.js文件中进行配置别名的,但这里没效果。 但是在vue后缀文件中的style样式里就可以用。script里面还是报

vue+ts项目配置-爱代码爱编程

VUE+ts项目配置--alias别名配置 需求应用alias别名的好处添加alias别名设置(1)在tsconfig.json中添加别名(2)在vue.config.ts(或.js)中添加别名 使用a

vue3+vite+ts配置项目别名“@/“_"paths\": { \"@/*\": [\"src/*\"], \"#/*\": [\"type-爱代码爱编程

  安装依赖 npm i -D @types/node 一.在tsconfig.json里添加 "baseUrl": "./", "paths": { "@/*":[ "src/*" ], "#/*":[ "types/*" ] } 二.vite.config.ts里添加 import * as path f

react配置项目路径别名@_react项目配置路径别名-爱代码爱编程

为什么有的项目引入路径写@可以,自己的不行呢? 因为别人的项目是配置过路径别名的,@就表示src目录,因此我们也需要配置一遍,以下是react项目示范,vue项目同理。 ts对@指向src目录的提示是不支持的,vite默认也不支持 所以需要手动配置@符号的指向 在vite.config.ts中添加配置: import path from "p

vue3 + vite + ts 设置 @ 路径别名_vue3 ts 目录别名-爱代码爱编程

由于 vite 创建项目后,tsconfig.json 已配置好对应别名,因此只需单独配置 vite.config.ts 即可。 目前 tsconfig.json 中应已有如下代码 "paths": { "@/*": ["src/*"], "@helpers/*": ["./src/helpers/*"], "