前言

转载：https://blog.csdn.net/panchang199266/article/details/90145638

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

查看vue-cli 版本及更新

https://www.cnblogs.com/wyongz/p/11505048.html
1.vue-cli安装

npm install vue-cli -g

2.vue-cli的版本查看

vue -V

3.vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的

npm install @vue/cli -g

4. 如果原来已经安装了vue-cli的话需要先卸载原来的安装

npm uninstall vue-cli -g

vue-cli 3.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
4. 使用

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

vue-cli 2.0 实现步骤

https://www.cnblogs.com/toprogram/p/12589376.html
html代码使用注意事项

 <img src="~static/image/game/kadingche.jpg" :alt="item.title" />

1. 如果html代码引用图片时，路径写死的情况下：
   使用static/image/game/kadingche.jpg 或者~static/image/game/kadingche.jpg都可以引用到时，那么变量引用就不能带波浪线~。否则会导致找不到！并且network还不报错。
   这种情况，应该是变量和路径别名冲突了？不知道

给static设置别名

https://www.cnblogs.com/vae860514/p/9060925.html

'static':path.resolve(__dirname, '../static'),//增加这一行代码