作者:卖好车大前端团队来源:https://juejin.im/post/5ec730bae51d4578732e61b6
一. 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 (obj) {
//r(key).default 是因为分区路由导出时采用 export default
obj.keys().forEach(
(key) => routerList.push(obj(key).default)
)
}
importAll(require.context('.', false, /\.router\.js/))
总结:该方法的好处在于,降低大型项目的路由复杂度,对路由进行分区管理,便于维护和迭代。
以上路由虽然添加了权限码,但是并没有做静态路由和动态路由的区分,如果项目需要进行权限判断时,只需要对分区路由文件进行区分,比如静态路由分区文件以 .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 结尾的压缩文件
4.同上修改 nginx 服务器配置,就可以愉快地访问啦~
如果能对你有帮助,便是它最大的价值。都看到这里还不点赞,太过不去啦