zqy233的前端学习笔记部署上线
微前端项目在本地开发完成后，接下来就需要考虑如何部署上线。主应用和微应用都应该是独立开发和打包
部署在同一服务器
如果服务器数量有限，或不能跨域等原因需要把主应用和微应用部署在一起
通常的做法是主应用部署在一级目录，微应用部署在二/三级目录
微应用改造
由于微应用部署在非根目录，微应用打包之前需要配置webpack构建时的publicPath为目录名称，以便于主应用注册微应用后能正常访问。
js
output: {
filename: isBuild ? '[name].[contenthash].js' : '[name].js',//编译时要加hash防止缓存
path: path.join(__dirname, 'dist'),//产物输出目录
publicPath: "/mkc/",
chunkFilename: isBuild ? '[name].[contenthash].chunk.js' : '[name].chunk.js',
library: `${pkgJson}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${pkgJson}`,
globalObject: 'window'
},
output: {
filename: isBuild ? '[name].[contenthash].js' : '[name].js',//编译时要加hash防止缓存
path: path.join(__dirname, 'dist'),//产物输出目录
publicPath: "/mkc/",
chunkFilename: isBuild ? '[name].[contenthash].chunk.js' : '[name].chunk.js',
library: `${pkgJson}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${pkgJson}`,
globalObject: 'window'
},
主应用改造
主应用在注册微应用时，需要注意：
- activeRule不能和微应用的真实访问路径一样；
- 微应用的真实访问路径就是entry，entry可以是相对路径；
- 微应用entry路径最后面的 / 不可省略；
js
/**
* 微应用为hash，注册微应用
* @param {*} hash
* @returns
*/
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
const defApps = [
{
name: 'imarket',
entry: `/life/`,
container: '#subapp-container',
activeRule: getActiveRule('#/imarket'),
},
{
name: 'MKCenter',
entry: `/mkc/`,
container: '#subapp-container',
activeRule: getActiveRule('#/MKCenter'),
},
]
/**
* 微应用为hash，注册微应用
* @param {*} hash
* @returns
*/
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
const defApps = [
{
name: 'imarket',
entry: `/life/`,
container: '#subapp-container',
activeRule: getActiveRule('#/imarket'),
},
{
name: 'MKCenter',
entry: `/mkc/`,
container: '#subapp-container',
activeRule: getActiveRule('#/MKCenter'),
},
]