vue 如何合并两个 项目_实例详解Vue基础学习之项目整合及优化

Vue基础学习之项目整合及优化

前言

使用 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'