【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问

下图最终打包效果如下：

描述：

公司有两个项目，UI界面以及框架是一致的，且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目：projectA和projectB项目，公共部分提取出来。

例如项目文件结构如下：

├── package.json
├── vite.config.js
├── index.html // 可以删除
├── env.porjectA // 项目A的环境变量
├── env.porjectB // 项目B的环境变量
└── src
    ├── main.ts // 可以删除
    ├── App.vue //可以删除
    └── api // 公用的api
    └── config // 配置文件 例如servive.ts,config.ts
    └── components // 公用组件
    └── project
        └── projectA
            └── utils // 各自的具包
            ｜————api 
            ｜————router 
            ｜————views 
            ｜————index.html 
            ｜————main.ts
            ｜————App.vue  
        └── projectB 
            └── utils // 各自的具包
            ｜————api 
            ｜————router 
            ｜————views 
            ｜————index.html 
            ｜————main.ts
            ｜————App.vue 
    └── utils // 公用工具包
    └── assets // 静态文件
    └── store  // 状态容器
    └── types  // type类型

主要实现要点：

1. projectA项目和projectB项目中均要保留index.html、main.ts/js 、App.vue 这三个文件可以直接复制粘贴src下的index.html、main.ts/js 、App.vue文件内容，需要注意的是main.ts路径引入的变化,以及路由的路径引入正确与否

例如

2. 配置vite.config.ts

扫描二维码关注公众号，回复： 14969194 查看本文章

import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
   // 项目1
    projectA: {
      // 入口文件
      entry: path.resolve(__dirname, 'src/projects/projectA/main.js'),
      // 打包输出路径
      outDir: path.resolve(__dirname, 'dist/projectA'),
      // 生成的 HTML 文件路径
      html: {
        filename: 'index.html',
        title: 'Project 1',
      }
    },
    // 项目2
    projectB: {
      entry: path.resolve(__dirname, 'src/projects/projectB/main.js'),
      outDir: path.resolve(__dirname, 'dist/projectB'),
      html: {
        filename: 'index.html',
        title: 'Project 2',
      }
    }
  }
  
  build: {
    target: 'modules',
    // 实现打包文件放在dist路径的 env.VITE_APP_NAME下， env.VITE_APP_NAME为环境变量，看下面的打包命令
    outDir: 'dist/'+ env.VITE_APP_NAME + '/', 
    assetsDir: 'static', //  这里是打包后文件的存放路径
    sourcemap: true,
    rollupOptions: {
      output: {
          // vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中
          entryFileNames: 'static/js/[name]-[hash].js',
          chunkFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/name-[hash].[ext]',
      }
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {}
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
    
})

3. 配置package.json

"scripts": {
    "i": "pnpm install",
    "dev:A": "vite --mode projectA",
    "dev:B": "vite --mode projectB",
    "build:A": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode projectA",
    "build:B": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode projectB",

}
// --mode projectA  指的是使用env.projectA 文件中的变量

4. 环境变量的配置

env.porjectA文件：

# 标题
VITE_APP_TITLE=我是项目标题A

# 子项目名称
VITE_APP_NAME=portal

env.porjectB文件：

# 标题
VITE_APP_TITLE=我是项目标题B

# 子项目名称
VITE_APP_NAME=risk

以上四点注意到的话，基本问题就不大了。

最后还有一点：运维部署的时候，注意路径

在此做记录

【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问

猜你喜欢