Vue项目中使用@代替src |
您所在的位置：网站首页 › idea中如何配置vue › Vue项目中使用@代替src |
Vue项目中使用@代替src
|
这篇文章是为了记录一下项目里面经常使用的一个配置：“路径别名”【我自己个取的名】 一般的 “路径别名” ： + @ ——src + components —— src/components 以上的路径别名的好处就是： 当项目文件较多的时候，可以避免“…/…/”这样的一层一层的回溯路径。当项目文件路径较深，使用相对路径不方便，使用传统的绝对路径又太复杂，可以方便程序员对文件的操作。好了，话说到这里，小涂带你们来配置吧！ 一共分为三步！ 一、安装path模块可以先看看自己个的node_modules文件里面能不能找到path模块。 像这样： 这一步我们就可以设置我们的路径别名了。 我的项目使用的是 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 勤劳的小涂工 |
如果没有，那就安装，终端运行： npm install path --save【本文地址】
今日新闻 |
推荐新闻 |