vue-cli3中来配置路径别名

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="">