背景
需求方有很多小项目，都是单个页面，如果每个工程单独开设一个工程，资源有点浪费，也不利于开发人员代码统一管理维护。
故提出解决方案：多项目单独打包。一个工程里面有多个单独的小项目，公共资源共用，每个项目配置单独的入口，使用webpack打包单个项目。
工程改造
目前我们的项目工程是使用vue-cli4构建的。在这基础上，需要进行工程改造
思路：
1、移除不需要的项目文件，使其最简单化。
2、在项目src目录下新建projects目录，用来放项目文件
3、给每一个项目配置main.js路口文件，配置路由文件，以及App.vue文件
4、配置打包文件vue.config.js
5、配置package.json 打包指令
6、运行打包部署测试效果
打包文件配置
目的是单独打包每一个小项目
需要配置：
1、项目入口
2、打包输出路径
3、devServer服务配置
4、项目的名称
项目入口配置
有两种方式：
1、配置pages
pages: {
index: {
entry: "src/projects/projectA/main.js",
template: "public/index.html",
filename: "index.html"
}
}
如果配置中有preload 的配置，那么需要修改相关的配置，不然会运行报错
config.plugin('preload-index').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
2、修改webpack默认的入口
config.entry.app = './src/main.js' // 默认
配置输出路径
outputDir: 'dist/' +'projectA' + '/',
devServer服务配置
devServer: {
port: 7001, // 端口地址
open: false, // 是否自动打开浏览器页面
host: '0.0.0.0', // 指定使用一个 host，默认是 localhost
https: false, // 使用https提供服务
disableHostCheck: true
}
项目的名称配置
config.name = 'projectA'
综合上述配置
可输出配置文件projectConfig.js
projectA: {
name: 'projectA',
entry: './src/projects/projectA/main.js',
devServer: {
port: 7001, // 端口地址
open: false, // 是否自动打开浏览器页面
host: '0.0.0.0', // 指定使用一个 host，默认是 localhost
https: false, // 使用https提供服务
disableHostCheck: true
}
}
vue.config.js 完整配置
'use strict'
const projectsConfig = require('./config/projectsConfig.js')
const projectName = process.env.PROJECT_NAME
module.exports = {
devServer: {
...projectsConfig[projectName].devServer
},
publicPath: './',
outputDir: 'dist/' + projectName + '/',
assetsDir: 'static',
configureWebpack(config) {
config.entry.app = projectsConfig[projectName].entry
const name = projectsConfig[projectName].name || 'Admin'
const resolve = {
alias: {
'@': path.join(__dirname, 'src')
}
}
return { name, resolve }
}
// 其他配置根据需求自行配置
配置打包指令
package.json
安装cross-env
npm install cross-env
配置打包项目名称PROJECT_NAME
"dev:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service serve ",
"build:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service build --mode production-dev",
效果展示
运行
npm run build:projectA
打包文件效果
npm run dev:projectA
项目是采用iframe嵌套展示的
页面效果
