Vue-cli 4在vue.config.js中配置別名

vue-cli3或者4中使用腳手架創建的項目，沒有webpack.base.config.js文件，那么咋搞？

手動創建唄？ 就可以配置一些額外的操作了，如何配置別名呢，直接上手吧。

創建vue.config.js文件

 

 

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('assets',resolve('./src/assets'))
        .set('commonjs',resolve('./src/commonjs'))
        .set('network',resolve('./src/network'))
        .set('views',resolve('./src/views'))
        //set第一個參數：設置的別名，第二個參數：設置的路徑
　　　　
    }
}

 

頁面使用

對於javascript引入：

第一種寫法：

第二種寫法：

對於css引入：

第一種寫法：路徑前面加~符號即可

第二種寫法：該效果可以

對於Vue頁面其他資源引入：

第一種寫法：加上 @

第二種寫法：加上 ~@

對於路由中的賴加載：

第一種寫法：

這第一種寫法：@加上 ~@就行不通了

第二種寫法：