Vue项目中配置路径别名以及使用技巧

路径别名配置

使用vue-cli 2.0的可以直接在vue.config.js中配置，如果使用vue-cli 3.0 由于在3.0版本则需要手动自行创建vue.config.js文件，下面为配置别名的vue.config.js文件的完整代码

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_imgs',resolve('src/assets/images'))
  },
}

使用技巧和注意事项

在Css中使用

在Css中使用别名需要在别名前加前缀~来避免歧义。

tips: 前缀~可以写完路径以后再加上，如果再编写路径的时候先在前面写上~了，插件就检测不到别名导致无法正常路径提示

如：

   <div class='main-box'>
       <img src="~_img/home-logo.png" alt="">
   </div>
   
   <style>
    .main-box{
         background: url("~_img/bg-img.png");
      }
   </style>

由于如果 URL 以~开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

<img src="~some-npm-package/foo.png"> 

路径提示

如果你Vscode中安装了Path Intellisense路径提示插件，会发现使用路径别名后没有路径提示了，只需要在setting.json文件中配置即可，Ctrl + Shift + P（Windows和Linux）,Command + Shift + P（Mac）打开命令面板输入open user settings.json并选择来打开配置文件

"path-intellisense.mappings": {
    "@": "${workspaceFolder}/src",
    "_imgs": "${workspaceFolder}/src/assets/imgages",
}

这样配置好在需要引用资源的地方就可以直接用别名并且会有路径提示了，避免手敲出错和更快捷，如果是在template模板中或者css中使用时则需要在路径前加上 ~ 的前缀来避免歧义。