vue 模块化开发

vue 框架搭建
vue 框架搭建

安装所需依赖

npm install --save view-design
npm install --save sass-loader
npm install --save-dev cross-env

新建 conAll projectA projectB projectC
根据一下目录新建文件

package.json

"dev": "cross-env PROJECT_NAME=conAll vue-cli-service serve",
		"dev:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service serve",
		"dev:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service serve",
		"dev:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service serve",
		"build": "cross-env PROJECT_NAME=conAll vue-cli-service build",
		"build:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service build",
		"build:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service build",
		"build:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service build",
		"lint": "vue-cli-service lint"

projectA projectB projectC 代码相同
参考
vue 框架搭建
注意main.js中的路径错误

conAll>view>index/index.vue

<template>
	<div class="ln-margin">
		<div class="ln-flex">
			<div v-for="(item,index) in systemList" :key="index" :class="activeIndex==index ?'active':''" @click="menuClick(item,index)">
				{{ item.title }}
			</div>
		</div>
		<iframe :src="systemUrl" width="100%" height="100%" frameborder="0" class="iframe" id="bossIframe"></iframe>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex: "0",
				systemUrl: "",
				systemList: [{
						title: "A项目",
						basepath: "http://localhost:8333/",
						systemId: "A"
					},
					{
						title: "B项目",
						basepath: "http://localhost:8334/",
						systemId: "B"
					},
					{
						title: "C项目",
						basepath: "http://localhost:8335/",
						systemId: "c"
					}
				],
				user: {}
			};
		},
		mounted() {
			this.systemUrl = this.systemList[0].basepath + "?systemId=" + this.systemList[0].systemId;
		},
		methods: {
			menuClick(item, index) {
				this.systemUrl = item.basepath + '?systemId=' + item.systemId;
				this.activeIndex = index
			}
		}
	};
</script>

<style scoped>
	.ln-margin {
		margin: 50px auto;
		width: 600px;
		border: 1px solid #00956A;
		height: 80vh;
	}

	.ln-flex {
		display: flex;
	}

	.ln-flex div {
		margin: 20px;
		padding: 10px;
	}

	.ln-flex div.active {
		border-bottom: 3px solid #0071F8;
	}
</style>

根目录下 新建config目录 index.js
config>index.js

var url = `http://120.24.252.226/api/`
// target: `http://127.0.0.1:8082`,
const config = {
	conAll: {
		pages: {
			index: {
				entry: "src/pages/conAll/main.js",
				template: "public/index.html",
				filename: "index.html"
			}
		},
		devServer: {
			port: 80, // 端口地址
			open: true, // 是否自动打开浏览器页面
			disableHostCheck: true,
			proxy: {
				"/api": {
					target: url,
					changeOrigin: true,
					pathRewrite: {
						'^/api': ''
					}
				}
			},
		}
	},
	projectA: {
		pages: {
			index: {
				entry: "src/pages/projectA/main.js",
				template: "public/index.html",
				filename: "index.html"
			}
		},
		devServer: {
			port: 8333, // 端口地址
			open: true, // 是否自动打开浏览器页面
			disableHostCheck: true,
			// 设置代理
			proxy: {
				"/api": {
					target: url,
					changeOrigin: true,
					pathRewrite: {
						'^/api': ''
					}
				}
			}
		}
	},
	projectB: {
		pages: {
			index: {
				entry: "src/pages/projectB/main.js",
				template: "public/index.html",
				filename: "index.html"
			}
		},
		devServer: {
			port: 8334, // 端口地址
			open: true, // 是否自动打开浏览器页面
			disableHostCheck: true,
			// 设置代理
			proxy: {
				"/api": {
					target: url,
					changeOrigin: true,
					pathRewrite: {
						'^/api': ''
					}
				}
			}
		}
	},
	projectC: {
		pages: {
			index: {
				entry: "src/pages/projectC/main.js",
				template: "public/index.html",
				filename: "index.html"
			}
		},
		devServer: {
			port: 8335, // 端口地址
			open: true, // 是否自动打开浏览器页面
			disableHostCheck: true,
			// 设置代理
			proxy: {
				"/api": {
					target: url,
					changeOrigin: true,
					pathRewrite: {
						'^/api': ''
					}
				}
			}
		}
	}
};
module.exports = config;

vue.config

const config = require("./config/index.js");
let projectName = process.env.PROJECT_NAME || "admin";

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
	...config[projectName],
	// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
	// 输出文件目录
	outputDir: "dist/" + projectName + "/",
}