Vue 使用@别名

冷不防 2024-05-07 22:26 83阅读 0赞

## 1. 安装 @types/node ##

> @types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API，并提供了对它们的类型检查和智能提示的支持。

npm install @types/node --save-dev

比如安装之后，就可以导入nodejs的 path模块，在下面代码 `import path from "path";` 中，`path` 是 Node.js 的核心模块之一，用于处理文件路径的操作。它提供了一些方法，用于在不同操作系统上正确解析、拼接和转换文件路径，以及获取路径的各个部分（目录名、文件名、扩展名等）。

## 2. 在vite.config.ts里面配置resolve ##

import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import path from "path";
    
    export default defineConfig({
      plugins: [vue()],
      server: {
         port: 5000, // 你需要定义的端口号
    
     }
     resolve: {
      // 配置路径别名， @就代表当前项目的绝对路径   // __dirname是一个全局变量，表示当前模块所属目录的绝对路径  // path.resolve返回一个以相对于当前的工作目录（working directory）的绝对路径,   // 比如当前工作目录为 D:\205\wms-web 那么 @ 就代表 D:\205\wms-web\src  alias: {
        '@': path.resolve(__dirname, './src'),
      }
    },
    
    })

## 3. 如果提示有标红波浪,在tsconfig.json 添加如下代码. ##

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

![2beeac12315b48aea7f3a59f63c29fd5.png][]

[2beeac12315b48aea7f3a59f63c29fd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/aeba207bdd0243f6bd1bf47c7ffab6f7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，83人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 使用@别名

types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API，并提供了对它们的类型检查和智能提示的支持。比如安装之后，就可以导入node...

冷不防/ 2024年05月07日 22:26/ 0 赞/ 84 阅读

相关 linux别名的使用

使用别名 linux中的部分命令使用起来参数非常多，而且繁复。如果是查看日志之类，那些日志路径还特别的长。linux提供了别名，使用别名替代繁复的命令，使用起来更方便。

ゞ浴缸里的玫瑰/ 2023年07月02日 03:20/ 0 赞/ 4 阅读

相关 Vue-cli4 配置文件路径别名以及使用详解

在开发vue项目中，我们经常需要引入不同的文件，这时就需要针对文件的路径进行设置，仅仅使用./ .//来进行文件的导入，维护和更改都变的相当麻烦，需要对文件的路

亦凉/ 2022年10月29日 11:18/ 0 赞/ 301 阅读

相关 VUE3路径别名

路径别名导致的问题现象一 > vue3_ts@0.0.0 dev /mnt/f/vue3_ts > vite error when

小灰灰/ 2022年09月06日 01:19/ 0 赞/ 207 阅读

相关 vue中的重定向和别名

重定向：重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，重定向也是通过 routes 配置来完成，下面例子是从 "\" 重定向

﹏ヽ暗。殇╰゛Y/ 2022年05月18日 23:22/ 0 赞/ 263 阅读

相关 vue-router—4重定向和别名

import Vue from 'vue' import VueRouter from "vue-router"; // 作为vue

我就是我/ 2022年01月21日 10:37/ 0 赞/ 209 阅读

相关 vue router 重定向与别名

文档 [官网][Link 1] 重定向 routes里面的写法 { //重定向testRedirect到了home

╰半夏微凉°/ 2022年01月18日 20:54/ 0 赞/ 227 阅读

相关 alias别名使用

alias 定义在当前session中，可以直接在命令行执行 `alias alias-name-define="xxxx"` 比如： root@pts/9

r囧r小猫/ 2022年01月12日 11:49/ 0 赞/ 358 阅读

相关 vue项目笔记（8）-路径别名的使用

vue中路径别名的使用在vue项目中，我们通常需要引入很多文件，但是在编写文件路径的时候很是麻烦，很多地方都是重复的路径前缀且容易出错。这个时候我们可以通过定义别名在简

红太狼/ 2021年09月16日 02:12/ 0 赞/ 514 阅读

相关 vue项目，webpack中配置src路径别名及使用

默认会有‘@’别名，指向src目录，还可以添加自定义别名等等。使用方法使用别名一般就三种情况：在js中用，在css中用，在html文档内用 js中用，最简单:

骑猪看日落/ 2021年08月28日 16:36/ 0 赞/ 1165 阅读