vue-cli4.0+nodejs多个项目共用组件动态打包单个项目
前言:公司经常会有一些活动,为了配合活动开发人员需要开发一些h5页面来配合活动,刚开始活动不多,所有活动页面都放在一个项目目录下,webpack共用一个固定打包入口,对路由(vue-router)和状态管理(vuex)进行模块划分,不同的活动页面通过不同的路由路径来加载。随着活动项目增多,页面也越来越多,问题就就出现了,比如打包projectA,webpack也会把projectB,proje..
前言:
公司经常会有一些活动,为了配合活动开发人员需要开发一些h5页面来配合活动,刚开始活动不多,所有活动页面都放在一个项目目录下,webpack共用一个固定打包入口,对路由(vue-router)和状态管理(vuex)进行模块划分,不同的活动页面通过不同的路由路径来加载。
随着活动项目增多,页面也越来越多,问题就就出现了,比如打包projectA,webpack也会把projectB,projectC打包进来,因为SPA应用是一次性下载所有资源文件,这就造成访问projectA或者projectB或者projectC的时候会变得慢,因为把一些不相干的代码也下载下来了。
有人会说每有一个项目vue init另起一个工程目录,但是这样每次都要复制一下工具类等公用代码,每次都要配置下环境,有的活动也就一两个页面另起一个工程没必要。
该架构是由vue-cli4.0生产后修改的结果,由于vue-cli4.0提供了十分方便的配置,项目看起来十分简单
github代码获取
项目运行:
npm i
安装依赖npm run d projectA
运行项目Anpm run b projectB
打包项目A
效果:
-
项目A
-
项目B
目录结构:
代码解析:
1.脚本文件:当npm run d/b + 项目名字的时候让webpack知道你想打包哪个项目
- dev.js运行脚本:
let projectName = process.argv[2]
console.log('\x1B[32m','————————————————您正在运行的项目名是————————————————', projectName);
let fs = require('fs');
// 记录正在运行的项目名
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
// 启动一个新的进程,并执行命令
let exec = require('child_process').execSync;
exec('npm run serve', {stdio: 'inherit'});
- build.js打包脚本:
let projectName = process.argv[2]
console.log('\x1B[32m','————————————————您正在打包的项目名是————————————————', projectName);
let fs = require('fs')
// 记录正在运行的项目名
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)
// 启动一个新的进程,并执行命令
let exec = require('child_process').execSync;
exec('npm run build', {stdio: 'inherit'});
- project.js项目名称记录脚本,里面的内容会在命令执行后自动修改
- projectConfig.js独立项目配置文件(重要),添加独立项目时想要在里面添加项目的文件路径,指引webpack打包,每一项相当于一个
HtmlWebpackPlugin
,所以它能配置的东西比vue-cli上面说的要多。
const projectName = require('./project')
const config = {
//项目A
projectA: {
pages: {
index: {
entry: 'src/projects/projectA/main.js',
outputDir: "dist/projectA/",
template: 'public/index.html',
filename: 'index.html',
}
}
},
//项目B
projectB: {
pages: {
index: {
entry: 'src/projects/projectB/main.js',
outputDir: "dist/projectB/",
template: 'public/index.html',
filename: 'index.html',
}
}
},
// 更多...
}
const configObj = config[projectName.name]
module.exports = configObj
2.vue.config.js修改vue-cli默认的webpack打包配置(主要用了pages属性):
更多配置请参考
/**
*
* 项目配置详情
*/
const conf = require('./config/projectConfig');
module.exports = {
pages: conf.pages,
lintOnSave: false
};
环境变量和模式
- 建立相应的文件,添加全局的环境配置,参考官网
更多推荐
所有评论(0)