Vue 使用@别名

冷不防 2024-05-07 22:26 66阅读 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 条评论，66人围观）

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

相关阅读

相关 Vue 使用@别名

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

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

相关 Vue：v-charts图表设置指标别名

用settings绑定一个labelMap即可完成，例如下面的代码将PV替换为“访问用户”，Order替换为“下单用户” <template> ...

Love The Way You Lie/ 2024年04月19日 09:06/ 0 赞/ 40 阅读

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

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

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

相关 VUE3路径别名

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

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

相关 vue中的重定向和别名

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

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

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

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

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

相关 vue router 重定向与别名

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

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

相关 alias别名使用

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

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

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

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

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

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

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

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