vue-cli 项目配置路径别名

vue-cli 项目配置路径别名

1.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
    }
}

2.vue-cli 3.x 配置方式

2.1配置文件位置(了解)

vue-cli 3.x以上的项目结构被精简了， 后来上网找了一下，配置文件被藏到了node_modules/@vue/cli-service/lib/config/base.js里面

 .modules
    .add('node_modules')
    .add(api.resolve('node_modules'))
    .add(resolveLocal('node_modules'))
    .end()
 .alias
 	.set('@', api.resolve('src'))     //这里配置的

2.2配置方法（方法）

我们虽然知道了配置文件位置，但是我们不通过修改node_modules/@vue/cli-service/lib/config/base.js来添加路径别名，而是在项目的根目录创建一个vue.config.js。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

const path = require('path');  //path模块
function resolve (dir) {
    return path.join(__dirname, dir)
}

// 项目的主要配置文件
module.exports = {
    //set第一个参数：设置的别名，第二个参数：设置的路径
    chainWebpack: (config)=>{
        //修改文件引入自定义路径
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
    }
}

3.使用

使用的配置的路径别名时，为了区分原路径和别名我们用~符合来区分

<!--这条会按原路径找-->
<img src="assets/img/test.jpg"/>
<!--这条会按路径别名找-->
<img src="~assets/img/test.jpg"/>