这篇文章是为了记录一下项目里面经常使用的一个配置:“路径别名”【我自己个取的名】


一般的 “路径别名” :
+ @ ——src
+ components —— src/components


以上的路径别名的好处就是:

  • 当项目文件较多的时候,可以避免“…/…/”这样的一层一层的回溯路径。
  • 当项目文件路径较深,使用相对路径不方便,使用传统的绝对路径又太复杂,可以方便程序员对文件的操作。

好了,话说到这里,小涂带你们来配置吧!

  • 一共分为三步!

一、安装path模块

可以先看看自己个的node_modules文件里面能不能找到path模块。
像这样:
在这里插入图片描述
如果没有,那就安装,终端运行:
npm install path --save


二、设置路径别名

这一步我们就可以设置我们的路径别名了。
我的项目使用的是 vue-cli 脚手架 搭建的。其余的项目目录结构,小涂就不知道了。

首先在和 src并齐的vue.config.js[没有就新建]中,使用path模块,设置一些路径的别名。

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
} 
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}

三、VScode 设置路径自动补全

在我们进行上述两个步骤之后,我们的@/...是可以正常使用了,但是!我们在编辑器输入@/以后,编辑器不会自动给我们提示。

那这样的话,我们还不如像以前那样的用./ ../这样式的路径,所以,这个时候,配置编辑器自动提示就十分必要了!

接下来,我们可以进行下面的操作:

  • 使用快捷键 ctrl + shift + p召唤搜索框
  • 搜索setting.json
  • 添加代码:
{
   "path-intellisense.mappings": {
   "@": "${workspaceRoot}/src"
}
}

以上的所有配置好了,代码确定没有错误之后,我们就可以正常使用@/...的方式来写路径了。
再顺嘴一提:如果你的依旧用不了,那么,请你检查本地安装的插件有没有与之冲突的。之前有人用不了是因为这个原因哦。
好了,小涂的分享到此结束了哦,拜拜呦,阖家幸福,万事大吉呦~
谢谢
(´▽`ʃ♡ƪ)

																									——by 勤劳的小涂工
Logo

前往低代码交流专区

更多推荐