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'), // 定义 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);}

二、整合功能模块

在多页应用的构建中，由于存在多个入口文件，因此会出现重复书写相同入口配置的情况，这样对于后期的修改和维护都不是特别友好，需要修改所有入口文件的相同配置，比如在 index 单页的入口中我们引用了 VConsole 及 performance 的配置，同时在 Vue 实例上还添加了 $openRouter 方法：

import Vue from 'vue'import App from './index.vue'import router from './router'import store from '@/store/'import { Navigator } from '../../common'// 如果是非线上环境，不加载 VConsoleif (process.env.NODE_ENV !== 'production') { var VConsole = require('vconsole/dist/vconsole.min.js'); var vConsole = new VConsole(); Vue.config.performance = true;}Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;new Vue({ router, store, render: h => h(App)}).$mount('#app')