vue项目cli4中使用别名：“@”和“~”的坑。

  在cli4中并没有像cli2中一样，拥有一个webpack.base.config.js文件,可以让我们直接写别名。

(以下仅仅是我所生效的配置，不同的可能不一样,因为我直接用网上的配置无效，所以摸索了一下，能正常运行)

创建vue.config.js文件

目录结构

没错，这个文件是和src在同一级目录下

配置文件中写入以下代码

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}

module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
            .set('@',resolve('./src'))
            .set('components',resolve('./src/components'))
            .set('views',resolve('./src/views'))
            .set('assets',resolve('./src/assets'))
        //set第一个参数：设置的别名，第二个参数：设置的路径

    }
}

我这里很郁闷，就是我的配置使用@/components会报错，所以我这里全部使用./src/components的方式

具体使用

在Html中

第一种

需要在使用前加上~

第二种

也可以使用@,当然这里在前面加上~@也是没什么问题的

在css中

第一种

直接使用即可

第二种

这里要注意一点，要在@前加上~，不然就吉吉国王了

在路由配置中

第一种

也是直接使用就可以了

第二种

这里和在html中差不多,但是注意一点，不能使用~@,不然也吉吉国王了