vuecli3多个项目共用组件动态打包单个项目
需求
项目处于缓冲期,时间充裕,于是从vuecli2.x将脚手架升级为vuecli3.x,并且需要多个项目引用一些公用封装的组件库,工具库或资源之类,于是集成在一起.当时做的时候,vuecli4正好出来了,前项目就是用的vuecli3.x,只是说这个项目加入进来的时候,还是vue2.x
其实很简单,多个项目多种配置,根据明确启动项目的命令,找到项目,按照项目的配置打包即可.
如何配置
vue.conifg.js
const path = require('path');
const conf = require('./config/projectConfig');//引入多个项目的配置
module.exports = {
pages: conf.pages,//使用不同的模板
outputDir: conf.outputDir,//输出到不同的文件夹下
devServer: conf.devServer,//代理服务器的配置不同,也主要是代理地址不同
…………
chainWebpack: conf.chainWebpack,
configureWebpack: conf.configureWebpack,
}projectConfig.js
文件就是部署项目的配置
const projectName = require('./project');
const config = {
projectA: {
pages: {
index: {
entry: 'src/projects/projectA/main.js',
template: 'public/index.html',
filename: 'index.html',
}
},
outputDir:'dist/projectA/',
…………
},
projectB: {
pages: {
index: {
entry: 'src/projects/projectB/main.js',
template: 'public/index_s.html',
filename: 'index.html',
}
},
outputDir:'dist/projectB/',
…………
}
}
const configObj = config[projectName.name]//这一部控制导出哪个项目下的配置
module.exports = configObjproject.js
该文件只做了一件事,导出当前你需要允许的项目名称,这不需要自己填写,会被你传递的参数自动写入
exports.name = 'projectA'在解释./project文件是如何被写入当前运行项目名称时,看看packJason里如何使用这个命令.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"d": "node config/dev.js",
"b": "node config/build.js"
}只需要看看dev.js
let projectName = process.argv[2]//是通过拿到环境参数来控制向project.js文件写入一个运行的名称
let fs = require('fs')
//写入
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
let exec = require('child_process').execSync;
exec('npm run serve', {stdio: 'inherit'});打印process来看看
[ 'C:\\Program Files\\nodejs\\node.exe',
'D:\\zy\\me\\new_learning_summary\\projects\\reusable-component-library\\config\\dev.js',
'projectA' ]process 对象是node环境下的一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。process.argv 属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数，
其中：
数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
第二个元素process.argv[1]——为当前执行的JavaScript文件路径
剩余的元素为其他命令行参数
这里我们传入的便是当前执行项目的参数,也就是启动哪个项目是通过传参设定的
但这里要求,启动时黑框命令行,可视化下不知道如何添加变量参数(项目名称)
npm run d 项目名称综上可看出nodejs的学习,对一个前端的重要性,下面是demo地址放在码云上.
地址:
https://gitee.com/jixiang2013/reusable-component-library下面是一些概念性的总结
cli3和cli2的区别
在我看来,cli3是便捷了很多,对开发者来说变得可以无脑上手了(可以这么说吗),cli2中,很多配置文件是公开的,需要自己书写配置,但配置变化的范围是少的,就是需求变化是少的.
cli3便捷的原因就是把冗余,不太会变的配置私有了,公开一些常用配置的接口,方便开发者去变化,但如果开发者对配置需求较多,主要是在chainWebpack,configureWebpack配置的成本稍微高一点.
新增环境的变量
之前是可以通过config/dev.env.js增添变量
"use strict";
const merge = require("webpack-merge");
const prodEnv = require("./prod.env");
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"api"',
FILE_API: '""',
IMAGE_API: '""'
});现在是根目录下.env.development和.env.production文件,通过VUE_APP_变量名增添环境变量,
eg:
NODE_ENV=development
VUE_APP_PROJECTA_URL=api获取变量的方式不变,仍旧是通过全局变量process得到.
eg:
process.env.VUE_APP_PROJECTA_URL开启GZIP压缩
这个问题也放在这里总结说,因为是此操作中遇到的,
安装使用
开启GZIP压缩的方式很简单,安装compression-webpack-plugin包,配置projectConfig文件下
npm i compression-webpack-pluginconfigureWebpack: (config) => {
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
);
},配置
直接开启后,打包出来的文件格式为index.js.gz
config.plugins.push也就是往配置文件中,添加一个 CompressionWebpackPlugin的对象.传入配置项
filename: '[path].gz[query]',//指定压缩后文件的格式,路径.gz[]query的意思不知道.
algorithm: 'gzip',压缩的算法是gzip
threshold: 10240, 只处理比这个值大的资源。按字节计算这里大概是10kb,超过10kb就压缩.
https://www.webpackjs.com/plugins/compression-webpack-plugin/#%E9%80%89%E9%A1%B9
可看这个学习如何配置
踩坑
web端开启之后,还需在Nginx服务器上配置下,按道理来说,配置是非常简单,Nginx的conf/nginx.conf文件为你准备好无脑的一切.
# gzip on;把注释打开即可.
我遇到一个奇葩的问题,周五发布时,我和测试都体会到开启GZIP压缩的快乐,周一测试来的时候,GZIP没有开启.
后续找到问题,没有指定文件的类型
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript;application/javascript 一定要有,不然不能传递压缩好的js的类型
最后感谢菲比月的博客,是通过学习她的,完成这次工作
https://www.cnblogs.com/phoebeyue/p/10303739.html?tdsourcetag=s_pcqq_aiomsg