vue-cli3配置路径别名
在日常开发中, 我们导入文件写的是相对位置, 和绝对位置
但是有些人可能知道@/store 是什么意思, 但是自己启动一个自己的vue项目却发现不可以??!!
许多新手 可能不知道 vue.config.js 的vue配置文件,
这个文件得自己创建的,创建到vue项目的根目录下面
将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api
// vue.config.js
const path = require('path')
const resolve = dir => 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("views", resolve("src/views"))
// .set("base", resolve("baseConfig"))
// .set("public", resolve("public"));
}
}
注意,引用别名时如果是html中的路径,则需要在别名前面加符号~
<img class="magnifyImage" src="~assets/images/icon/magnify.png" alt="">