vue3+ts+vite+qiankun项目配置及部署

#微前端# #应用间资源共享# #敏捷开发# 

qiankun部署

项目描述

主应用:vue3+ts+vite+qiankun

微应用:vue3+ts+vite+qiankun

路由模式都是History

乾坤插件:主应用:qiankun 微应用:vite-plugin-qiankun

部署模式为:一个前端服务部署主应用及其他微应用

1.主应用配置

main.ts文件下

registerMicroApps([
  // kehu
  {
    name: 'customerinfo', // 子应用名称
    // 打包之前这里的路径一定要和    nginx项目目录的路径一致
    entry: import.meta.env.MODE === 'development' ? '//192.168.0.157:3331' : '/child/customeradmin/', 
    container: '#big-srceen', // 子应用在主应用显示的容器 在 App.vue中
    // 打开子应用时的路由
    activeRule: import.meta.env.MODE === 'development' ? '/customerinfo' : '/child/customerAdmin/customerinfo/mycustomer' 
  }
]);

跳转到子应用的路由

const customerFn = () => {
  router.push(import.meta.env.MODE === 'development' ? '/customerinfo/mycustomer' : '/child/customerAdmin/customerinfo/mycustomer');
};

特殊说明

主应用中子应用的入口在打包之前一定要改成nginx上微应用对应的路径,这样在nginx拦截请求分发时才会找到微应用对应的资源

2.微应用配置

vite.config.ts 文件下( 主要修改 base 下面的路径 及 微应用的名称)

export default defineConfig(({ command, mode }) => {
  return {
    // 注意，必须以"/"结尾，在打包时这里的路径必须和nginx的目录路径一致
    base: env.NODE_ENV === 'development' ? '/' : '/child/customeradmin/', 
    define: {
      'process.env': env
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler'
        }
      }
    },
    plugins: [
      vue(),
      // 此处要与主应用配置的子应用名字相同
      qiankun('customerinfo', {
        useDevMode: true
      }),
      Inspect(),
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      svgSprites({
        vueComponent: true,
        exclude: ['node_modules/**'],
        symbolId(filePath) {
          const filename = path.basename(filePath);
          return 'icon-' + filename.substring(0, filename.lastIndexOf('.'));
        }
      }),
      // https://openbase.com/js/vite-plugin-mock
      viteMockServe({
        ignore: /^_/,
        mockPath: './mock/',
        supportTs: true,
        watchFiles: true,
        localEnabled: command === 'serve',
        prodEnabled: command !== 'serve' && prodMock,
        // configPath: './mock/index.js',
        logger: false,
        injectCode: `import { setupProdMockServer } from '../mock/_createProductionServer.js';
      setupProdMockServer();`
      })
    ],
    server: {
      host: '0.0.0.0',
      port: 3331,
      proxy: {
          //后端代理
        '/prod-api/portal': {
          target: 'http://192.168.0.106:63231',
          // secure: true,           // 如果是 https ,需要开启这个选项，http为false
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/prod-api/, '')
        }
      }
    }
  };
});

router/index.ts下路由

const createTheRouter = ():Router => createRouter({
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  history: createWebHistory(import.meta.env.MODE === 'development' ? '/' : '/child/customerAdmin'),
  // scrollBehavior: () => ({ top: 0 }),
  routes: constantRoutes
});

其他路由配置 都是以 默认路径(/child/customerAdmin 拼接 各自的路由)

特殊说明

微应用配置在vite.config.ts中配置 base,这样微应用的打包结果(dist>index.html模版的引入资源路径)就会带上对应的前缀,这样在nginx根据请求地址分发路径是就可以找的微应用的静态资源,所以要与nginx上的路径保持一致.(base说明:这个前缀也会直接应用到你的路由前缀,当然你的路由前缀是可以通过createWebHistory()进行自定义的.如果只设置base 不设置createWebHistory()那么你的前缀就是base的路径.)

3.Nginx配置

目录结构

|--yunying  //根目录(主应用)
|----assets //打包好的静态资源
|----child  //二级目录(里面都是一个一个的微应用)
|------customeradmin //(vue3+ts+vite的一个微应用)
|------------assets  //打包好的静态资源
|------------favicon.ico 
|------------index.html //微应用入口
|------(其他微应用.......)
|----favicon.ico
|----index.html //主应用入口

配置文件 yunying.conf

server{
        listen 9530; //启动端口
        location / {   //主应用的路径
                root /usr/local/yunying;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
        # 访问地址为 /customerinfo/mycustomer/   
        # 拦截到   
        #   /usr/local/yunying/child/customeradmin/index.html (这个child/customeradmin就是前面说的base路径)
        location /customerinfo/mycustomer/ {
                root /usr/local/yunying;
                index index.html index.htm;
                try_files $uri $uri/ /child/customeradmin/index.html;
        }
        #其他微应用配置及后端代理
}

其他微应用都是一样的配置