# 构建实战篇 4：项目整合与优化
前几小节，我们讲述了 Vue 项目构建的整体流程，从无到有的实现了单页和多页应用的功能配置，但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案，就像大楼造完需要进行最后的项目验收改进一样，有待我们进一步的去完善。
# 使用 alias 简化路径
使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径，比如像这样：
import HelloWorld from '../../../../HelloWorld.vue'
@前端进阶之旅: 代码已经复制到剪贴板
一旦相对层次结构较深，我们就很难去定位所引入文件的具体位置，其实这并不是我们应该操心的地方，完全可以交给 webpack 来进行处理。在原生的 webpack 配置中我们可以定义 alias 来解决这一问题：
const path = require('path')
const resolve = dir => {
return path.join(__dirname, dir)
}
module.exports = {
...
resolve: {
alias: {
'@': resolve('src'), // 定义 src 目录变量
_lib: resolve('src/common'), // 定义 common 目录变量,
_com: resolve('src/components'), // 定义 components 目录变量,
_img: resolve('src/images'), // 定义 images 目录变量,
_ser: resolve('src/services'), // 定义 services 目录变量,
}
},
...
}
@前端进阶之旅: 代码已经复制到剪贴板
上方我们在 webpack resolve（解析）对象下配置 alias 的值，将常用的一些路径赋值给了我们自定义的变量，这样我们便可以将第一个例子简化为：
import HelloWorld from '_com/HelloWorld.vue'
@前端进阶之旅: 代码已经复制到剪贴板
而在 CLI 3.x 中我们无法直接操作 webpack 的配置文件，我们需要通过 chainWebpack 来进行间接修改，代码如下：
/* vue.config.js */
module.exports = {
...
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('_lib', resolve('src/common'))
.set('_com', resolve('src/components'))
.set('_img', resolve('src/images'))
.set('_ser', resolve('src/services'))
},
...
}
@前端进阶之旅: 代码已经复制到剪贴板
这样我们修改 webpack alias 来简化路径的优化就实现了。但是需要注意的是对于在样式及 html 模板中引用路径的简写时，前面需要加上 ～ 符，否则路径解析会失败，如：
.img {
background: (~_img/home.png);
}
@前端进阶之旅: 代码已经复制到剪贴板
