【vue】vue中设置路径别名

前言

转载：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 如果原来已经安装了vue-cli的话需要先卸载原来的安装 npm uninstall vue-cli -g

vue-cli 3.0 实现步骤

新建 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('')) } }; 设置别名 // 按这种格式.set('', resolve('')) .set('styles',resolve('src/assets/styles')) 重启IDE使用 // 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" /> 如果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'),//增加这一行代码