一. Vue 批量注册全局组件
1.在全局组件 components 文件夹下新增 global.js 文件 该文件为全局组件配置文件，文件内容如下：
important Vue from 'vue'
function changeStr (str) {
//charAt 去字符的第一个自检 abc => Abc
return str.charAt(0).toUpperCase() + str.slice(1)
}
//require.context(a,b,c) a => 目录 b => 是否有子目录 c => 匹配文件的正则
const requireComponent = require.context('.', false, /\.vue$/)
requireComponent.keys().forEach(fillName => {
//第i个
const config = requireComponent(fillName)
const componentName = changeStr(
fillName.replace(/^\.\//,'').replace(/\.\w+$/,'')
)
Vue.component(componentName, config.default || config)
})
创建该文件之后，就可以直接在 components 文件内编写全局组件，由于 require.context( )中的第二个参数填写的是 false，所以所有组件都需要以 .vue 文件的形式直接存放在 components 文件下
2.在main.js全局引入该global.js
注意：注册全局组件会带来性能的损耗，所以需要清除该方法的使用场景，只有在组件频繁使用的情况下适 合使用，比如一些表格、弹框、提示框、输入框等组件
二. Vue 主路由优化
主要原理：使用 webpack 的 require.context() API
假设 demo 中有两个模块，home 和 login
1.在项目 router 文件夹下面新增 home.router.js 和 login.router.js 进行分区
大致内容：
export default {
path: '/home',
redirect: '/home',
component: () => import('@/views/layout'),
meta: { //路由的排序会根据该权限码的大小进行升序排序
role: [10000],
title: '首页'
},
children: [
{
path: '',
name: 'home',
component: () => import('@/views/home/index'),
meta: {
title: '平台首页',
icon: 'iconfont icon-shouye',
role: [11000],
},
},
],
}
2.在 router 文件夹的主路由文件夹中批量引入分区路由
大致内容：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routerList = []
function importAll (r) {
r.keys().forEach( //r(key).default 是因为分区路由导出时采用 export default
(key) => routerList.push(r(key).default)
)
}
importAll(require.context('.', false, /\.router\.js/))
// 按照权限码排序routerList = routerList.sort((a, b) => { return a.meta.role[0] - b.meta.role[0] })export const asyncRoutes = [...routerList]export default new Router({ mode: 'history', base: '', routes: asyncRoutes})
总结：该方法的好处在于，降低大型项目的路由复杂度，对路由进行分区管理，便于维护和迭代。
以上路由虽然添加了权限码，但是并没有做静态路由和动态路由的区分，如果项目需要进行权限判断时，只需要对分区路由文件进行区分，比如静态路由分区文件以 .crouter.js 结尾，动态路由分区文件以 .arouter.js 结尾，在主路由中引入分区路由文件时，分两次执行 importAll() 方法，只需要修改两次执行时的正则就可以分别导入两种路由。
在需要频繁 import 的情况下，可以尝试合理使用该方法！
三. Vue-Cli 3 引入 SCSS 全局变量
1.首先创建一个全局变量文件 global.scss
$theme-color: #efefef;
2.配置 vue.config.js
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/global.scss";`
}
}
}
}
现在就可以在任意地方使用global.scss中定义的变量了，这么做的目的主要是为了一些主题样式的全局配置，例如主体背景颜色、全局默认字体大小、颜色等等。
四. vue-cli2 打包开启 gzip 压缩
1.安装打包插件：compression-webpack-plugin
这里使用 npm 安装：npm install --save-dev compression-webpack-plugin@1.1.12
因为vue-cli2使用的是webpack3.0+，但是最新版的compression-webpack-plugin需要 webpack4.0+才能支持，所以这边安装插件的时候，需要指定一个低版本号，防止兼容问题发生。
2.安装好之后，修改 config 文件夹下的 index.js 配置文件
将 productionGzip: false 改为 true
3. 添加css文件压缩配置
不进行这一步的情况下，已经可以正常打包，并且将大文件压缩成 gz 文件，但是因为vue-cli自带的webpack.prod.config配置没有对css文件进行匹配，所以如果需要css文件进行压缩的话，就要修改build文件夹下的正则匹配。
修改为
4.运行 npm run build 进行打包
会将大小大于 10kb 的文件进行压缩，生成 gz 结尾的静态文件
5.最后一步，上传到服务器之后，nginx 需要进行配置，配置文件如下
接下来就可以愉快地访问啦！
五. vue-cli3 打包开启 gzip 压缩
1.安装打包插件：compression-webpack-plugin
这里使用 npm 安装：npm install --save-dev compression-webpack-plugin
2.修改 vue.config.js 配置
3.运行 npm run build 进行打包
打包完之后可以看到，打包文件生成了 gz 结尾的压缩文件
