背景
需求方有很多小項(xiàng)目劝贸，都是單個頁面蓖谢，如果每個工程單獨(dú)開設(shè)一個工程，資源有點(diǎn)浪費(fèi)捏膨，也不利于開發(fā)人員代碼統(tǒng)一管理維護(hù)却汉。
故提出解決方案：多項(xiàng)目單獨(dú)打包驯妄。一個工程里面有多個單獨(dú)的小項(xiàng)目，公共資源共用合砂，每個項(xiàng)目配置單獨(dú)的入口青扔，使用webpack打包單個項(xiàng)目。
工程改造
目前我們的項(xiàng)目工程是使用vue-cli4構(gòu)建的翩伪。在這基礎(chǔ)上微猖，需要進(jìn)行工程改造
思路：
1、移除不需要的項(xiàng)目文件缘屹，使其最簡單化凛剥。
2、在項(xiàng)目src目錄下新建projects目錄轻姿，用來放項(xiàng)目文件
3犁珠、給每一個項(xiàng)目配置main.js路口文件，配置路由文件互亮，以及App.vue文件
4犁享、配置打包文件vue.config.js
5、配置package.json 打包指令
6豹休、運(yùn)行打包部署測試效果
打包文件配置
目的是單獨(dú)打包每一個小項(xiàng)目
需要配置：
1炊昆、項(xiàng)目入口
2、打包輸出路徑
3、devServer服務(wù)配置
4凤巨、項(xiàng)目的名稱
項(xiàng)目入口配置
有兩種方式：
1视乐、配置pages
pages: {
index: {
entry: "src/projects/projectA/main.js",
template: "public/index.html",
filename: "index.html"
}
}
如果配置中有preload 的配置，那么需要修改相關(guān)的配置敢茁，不然會運(yùn)行報錯
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默認(rèn)的入口
config.entry.app = './src/main.js' // 默認(rèn)
配置輸出路徑
outputDir: 'dist/' +'projectA' + '/',
devServer服務(wù)配置
devServer: {
port: 7001, // 端口地址
open: false, // 是否自動打開瀏覽器頁面
host: '0.0.0.0', // 指定使用一個 host，默認(rèn)是 localhost
https: false, // 使用https提供服務(wù)
disableHostCheck: true
}
項(xiàng)目的名稱配置
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卷要，默認(rèn)是 localhost
https: false, // 使用https提供服務(wù)
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 }
}
// 其他配置根據(jù)需求自行配置
配置打包指令
package.json
安裝cross-env
npm install cross-env
配置打包項(xiàng)目名稱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",
效果展示
運(yùn)行
npm run build:projectA
npm run dev:projectA
項(xiàng)目是采用iframe嵌套展示的
