vue脚手架配置路径别名

vue-cli 项目配置路径别名

vue-cli 2.x配置方式
在vue-cli 2.x项目中，进入build文件夹，找到webpack.base.conf.js，编辑文件 ，并找到resolve字段的配置项。

resolve: {
    extensions: ['.js', '.vue', '.json'],    //这个是匹配扩展名的
    alias: {                   
      '@': resolve('src'),            //src解析成@
      'assets': resolve('src/assets'),        // src/assets解析成assets
    }
}

vue-cli 3.x 配置方式
vue-cli 3.x中配置文件被隐藏到node_modules/@vue/cli-service/lib/config/base.js里面了。虽然我们知道了文件被藏到什么地方，但一般我们不修改node_modules中的文件。
所以我们可以在项目的根目录下创建一个vue.config.js文件，用来配置路径别名，它会被 @vue/cli-service 自动加载，前提是该文件一定要存在于项目的根目录下。

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                "views": "@/views",
                "network": "@/network",
                "components": "@/components",
                "common": "@/common",
                "assets": "@/assets"
            }
        }
    }
}

需要注意的是，vue-cli 3.x已经默认帮我们配置了src别名为@，所以这里我们不需要再配置src。

使用

使用别名

@import "~assets/css/base.css";

不使用别名

@import "./assets/css/base.css";