三、Vue中设置路径别名

一：问题

  在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。

二：设置别名步骤

下例是使用 vue-cli3.0构建项目，步骤如下：

1.新建 vue.config.js 文件，和package.json同层级

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      // 需要重启 IDE
      .set('styles',resolve('src/assets/styles'))
      // 这里只写了两个个，你可以自己再加，按这种格式.set('', resolve(''))
  }
};

2.设置别名

// 按这种格式.set('', resolve(''))
.set('styles',resolve('src/assets/styles'))

3.重启IDE

一定要重启IDE，否则会报错！！！

4.使用

原来写法：

//@：代表src目录，在css中引入其他css，使用 @ 时，前面需要加上 ~
@import '~@/assets/stylesstyles/variable.styl'

设置别名后写法：

// styles就是我在vue.config.js中设置的路径别名，代表 'src/assets/styles' 路径 
@import '~styles/variable.styl'