超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目

帅龍之龍

已于 2024-03-28 00:00:44 修改

阅读量1.2k

点赞数 7

分类专栏：前端三大框架 # Vue 前端大杂烩文章标签：前端

于 2023-10-10 17:37:57 首次发布

本文链接：https://blog.csdn.net/Cai181191/article/details/133752683

版权

前端大杂烩同时被 3 个专栏收录

69 篇文章 8 订阅

订阅专栏

Vue

51 篇文章 1 订阅

订阅专栏

前端三大框架

38 篇文章 0 订阅

订阅专栏

前言

最近有个需求就是构建一个可复用公共组件、可分模块独立部署的前端项目。关于这个共享开发和分模块打包的操作，还记得是在上家公司的某个SpringBoot项目上见过。它的好处就是子模块各自独立开发与打包、可复用父模块的共享代码、降低耦合度等。前端这里还没试过这样的操作，于是面向谷歌/百度开发一下。嗯，原来有这种操作的，真是流批，在此记录一下这个解决方案。

一、准备环境

（1）开发环境

C:\Users\帅龍之龍>nvm -v
1.1.12

C:\Users\帅龍之龍>nvm ls

  * 20.4.0 (Currently using 64-bit executable)
    18.16.1
    16.19.1

C:\Users\帅龍之龍>node -v
v20.4.0

C:\Users\帅龍之龍>npm -v
9.7.2

（2）nvm相关命令说明

nvm off                     # 禁用node.js版本管理(不卸载任何东西)
nvm on                      # 启用node.js版本管理
nvm install <version>       # 安装node.js的命名 version是版本号 例如：nvm install 16
nvm uninstall <version>     # 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls                      # 显示所有安装的node.js版本
nvm list available          # 显示可以安装的所有node.js的版本
nvm use <version>           # 切换到使用指定的nodejs版本
nvm v                       # 显示nvm版本
nvm install stable          # 安装最新稳定版

（3）settings.txt

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

二、创建Vite项目

1.新建一个temp文件夹

（1）在桌面新建一个temp文件夹，然后在VS Code中打开此文件夹，打开一个终端；

2.创建一个Vite+Vue项目工程

（1）具体操作如下：

npm create vite@latest

(1) 输入项目名，如： vite-vue3-multi_modulets，然后回车
? Project name: » vite-vue3-multi_modulets
 
(2) 选择 Vue 框架，回车
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Others
 
(3) 选择数据类型，回车
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗
 
(4) 创建完成，运行项目
Done. Now run: 
 
  cd vite-vue3-multi_modulets
  npm install
  npm run dev
 
PS C:\Users\帅龍之龍\Desktop\temp>

3.修改vite.config.ts文件

（1）修改前

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

（2）修改后

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

let config
const moduleName = process.env['npm_config_project'] // 使用`--project=[module_name]`获取模块名
if (!moduleName) {
  // 构建父模块
  config = {
    plugins: [vue()],
  }
} else {
  // 构建子模块
  config = {
    plugins: [vue()],
    root: `./src/apps/${moduleName}`,
    build: {
      rollupOptions: {
        input: resolve(__dirname, `src/apps/${moduleName}/index.html`), // 指定子模块入口文件
        output: {
          dir: `dist/apps/${moduleName}`
        }
      }
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig(config)

三、以新建子目录的方式来创建应用或模块

（1）在项目的src目录中，新建apps文件夹

（2）在apps目录中，新建projectA和projectB文件夹

（3）在projectA和projectB文件夹，各新建一个App.vue、index.html、main.ts文件

/src/apps/projectA

-> App.vue
<template>
  <div>项目A</div>
</template>

-> index.html
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./assets/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目A</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

-> main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

---- ---- ---- ---- ---- ---- ---- ----

/src/apps/projectB

-> App.vue
<template>
  <div>项目B</div>
</template>

-> index.html
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./assets/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目B</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

-> main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

四、运行项目

npm run dev # 构建父模块
npm run dev --project=projectA # 构建projectA模块
npm run dev --project=projectB # 构建projectB模块

npm run build # 打包父模块
npm run build --project=projectA # 打包projectA模块
npm run build --project=projectB # 打包projectB模块

五、白嫖地址

vite-vue3-multi_modulets: 这是一个基于 Vite 构建的 Vue3 + TS 项目，支持组件共享、分模块编译和打包。

帅龍之龍

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目

最近有个需求就是构建一个可复用公共组件、可分模块独立部署的前端项目。关于这个共享开发和分模块打包的操作，还记得是在上家公司的某个SpringBoot项目上见过。它的好处就是子模块各自独立开发与打包、可复用父模块的共享代码、降低耦合度等。前端这里还没试过这样的操作，于是面向谷歌/百度开发一下。嗯，原来有这种操作的，真是流批，在此记录一下这个解决方案。
复制链接

扫一扫