Vue项目中使用@代替src——并在VScode中开启@路径自动提示

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

---

一般的 “路径别名” ：
+ @ ——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 勤劳的小涂工