vue3 + vite 多项目多模块打包

本示例基于vite-plugin-html插件，实现多个独立项目共存，共享组件和依赖，运行、打包互不干扰。

npm create vite@latest

兼容性注意

Vite 需要 Node.js 14.18+、16+版本，有些模板需要更高的版本

虽然创建项目用的14.17.5版本，但是后面运行项目用的18.15.0

HTML模板插件

npm i vite-plugin-html -D


#vite.config.ts

import {defineConfig} from "vite"

import vue from '@vitejs/plugin-vue'

import {createHtmlPlugin} from 'vite-plugin-html'

const htmlParams = {

    minify: true,

    pages: [

        {

            filename: 'index',     // filename 默认是template文件名，就是index.html

            entry: '/src/main.ts',

            template: 'index.html',

        }

    ]

}

export default defineConfig({

    base: './',               // 方便打包后预览

    publicDir: 'public',      // 默认 public

    plugins: [vue(), createHtmlPlugin(htmlParams)],

    build: {

        cssCodeSplit: true,

        emptyOutDir: true,

        sourcemap: false,

        assetsDir: 'assets', // 默认 assets

        outDir: 'dist',      // 默认 dist

        rollupOptions: {

            input: {},       // input 不用管，插件内会处理

            output: {

                compact: true,

                entryFileNames: "static/js/[name]-[hash].js",

                chunkFileNames: "static/js/[name]-[hash].js",

                assetFileNames: "static/[ext]/[name].[ext]",

            }

        }

    }

})

打包一下 验证插件效果

npm run build

目录改造

 beijing.html

 nanjing.html

src

 - beijing

   - App.vue

   - main.ts

 - nanjing

   - App.vue

   - main.ts

新增文件(项目模板)：beijing.html、nanjing.html

# beijing.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <link rel="icon" type="image/svg+xml" href="/static/imgs/vite.svg" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>北京项目</title>

  </head>

  <body>

    <div id="app"></div>

    <script type="module" src="/src/beijing/main.ts"></script>

  </body>

</html>

nanjing.html内容略(把北京的复制一份)

新增目录及项目文件：beijing/App.vue、beijing/main.ts、nanjing/App.vue、nanjing/main.ts

# beijing/main.ts

import { createApp } from 'vue'

import '../style.css'

import App from './App.vue'

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


# beijing/App.vue

<script setup lang="ts">

import HelloWorld from '../components/HelloWorld.vue'

</script>

<template>

    <div>

        <img src="/static/imgs/vite.svg" class="logo" alt="Vite logo"/>

        <img src="../assets/vue.svg" class="logo vue" alt="Vue logo"/>

        <h1>北京项目</h1>

    </div>

    <HelloWorld msg="HelloWorld"/>

</template>

nanjing/App.vue、nanjing/main.ts 内容略(把北京的复制一份)

注意文件路径，例如：vite.svg、vue.svg、style.css

#vite.config.ts

import {defineConfig} from "vite"

import vue from '@vitejs/plugin-vue'

import {createHtmlPlugin} from 'vite-plugin-html'

const htmlParams = {

    minify: true,

    pages: [

        {

            filename: 'beijing', // filename 默认是template文件名，就是beijing.html

            entry: '/src/beijing/main.ts',

            template: 'beijing.html',

        },

        {

            filename: 'nanjing',

            entry: '/src/nanjing/main.ts',

            template: 'nanjing.html',

        },

    ]

}

export default defineConfig({

    base: './',             // 方便打包后预览

    publicDir: 'public',    // 默认 public

    plugins: [vue(), createHtmlPlugin(htmlParams)],

    build: {

        cssCodeSplit: true,

        emptyOutDir: true,

        sourcemap: false,

        assetsDir: 'assets', // 默认 assets

        outDir: 'dist',      // 默认 dist

        rollupOptions: {

            input: {},       // input 不用管，插件内会处理

            output: {

                compact: true,

                entryFileNames: "static/js/[name]-[hash].js",

                chunkFileNames: "static/js/[name]-[hash].js",

                assetFileNames: "static/[ext]/[name].[ext]",

            }

        }

    }

})

打包结果

我这的java项目集成的是FreeMarker，

把项目模板beijing.html改成beijing.ftl，修改文件里对应的静态资源路径，

前端打包之后，把dist下面的文件同步到java项目的static目录。

别名配置

ts 配置，新增项 baseUrl、types、paths

# tsconfig.json

{

  "compilerOptions": {

    "target": "ESNext",

    "useDefineForClassFields": true,

    "module": "ESNext",

    "moduleResolution": "Node",

    "strict": true,

    "jsx": "preserve",

    "resolveJsonModule": true,

    "isolatedModules": true,

    "esModuleInterop": true,

    "lib": ["ESNext", "DOM"],

    "skipLibCheck": true,

    "noEmit": true,

    "baseUrl": "src",

    "types": ["vite/client"],

    "paths": {"@/*": ["./*"]}

  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

  "references": [{ "path": "./tsconfig.node.json" }]

}

vite 配置，新增项 resolve.alias

# vite.config.ts

import {resolve} from "path";

import {defineConfig} from "vite"

import vue from '@vitejs/plugin-vue'

import {createHtmlPlugin} from 'vite-plugin-html'

const htmlParams = {

    minify: true,

    pages: [

        {

            filename: 'beijing', // filename 默认是template文件名，就是beijing.html

            entry: '/src/beijing/main.ts',

            template: 'beijing.html',

        },

        {

            filename: 'nanjing',

            entry: '/src/nanjing/main.ts',

            template: 'nanjing.html',

        },

    ]

}

export default defineConfig({

    base: './',             // 方便打包后预览

    publicDir: 'public',    // 默认 public

    plugins: [vue(), createHtmlPlugin(htmlParams)],

    resolve: {

        alias: {

            '@': resolve(__dirname, 'src'),

        }

    },

    build: {

        cssCodeSplit: true,

        emptyOutDir: true,

        sourcemap: false,

        assetsDir: 'assets', // 默认 assets

        outDir: 'dist',      // 默认 dist

        rollupOptions: {

            input: {},       // input 不用管，插件内会处理

            output: {

                compact: true,

                entryFileNames: "static/js/[name]-[hash].js",

                chunkFileNames: "static/js/[name]-[hash].js",

                assetFileNames: "static/[ext]/[name].[ext]",

            }

        }

    }

})

项目里面，引入文件："../assets/vue.svg"、"../components/HelloWorld.vue" 改为 "@/assets/vue.svg"、"@/components/HelloWorld.vue"

vue3 + vite 多项目多模块打包的更多相关文章

  1. SpringBoot项目多模块打包与部署【pom文件问题】

    [bean的pom] [user的pom] 特别注意,user模块因为有返回jsp页面和web相关,所以需要加入web依赖. chapter23 com.yuqiyu 1.0.0 4.0.0 com. ...

  2. Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）

    在项目或产品的迭代过程中,通常会有多套环境,常见的有: dev:开发环境 sit:集成测试环境 uat:用户接收测试环境 pre:预生产环境 prod:生产环境 环境之间配置可能存在差异,如接口地址. ...

  3. vite的项目，使用 rollup 打包的方法

    官网资料 构建生产版本--库模式 https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/conf ...

  4. 基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  5. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  6. Vue3+Vite项目中 使用WindiCSS.

    之前工作有了解过根据类名来写元素的样式,一听就发出疑问:这样写项目可读性恐怕不是很好吧... 之后来到杭州工作后,开始使用WindiCSS后发现 真香!!!  由于近期所写的项目都是自己一个人开发的 ...

  7. vue3.0+vite+ts项目搭建--初始化项目(一)

    vite 初始化项目 使用npm npm init vite@latest 使用yarn yarn create vite 使用pnpm pnpx create-vite 根据提示输入项目名称,选择v ...

  8. 什么，你还使用 webpack？别人都在用 vite 搭建项目了

    一.vite 到底是干嘛的? vite 实际上就是一个面向现代浏览器,基于 ES module 实现了一个更轻快的项目构建打包工具. vite 是法语中轻快的意思. vite 的特点: 1.轻快的冷服 ...

  9. 开箱即用 yyg-cli（脚手架工具）：快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  10. Vue3+vite+Echarts案例大屏可视化--千峰（推荐）

    https://www.bilibili.com/video/BV14u411D7qK?p=33&spm_id_from=pageDriver&vd_source=e2cfe74d93 ...

随机推荐

  1. 性能工具---JConsole基于JMX的可视化监视、管理工具

    与visualvm类似: JConsole: (Java Monitoring and Management Console),一种基于JMX的可视化监视.管理工具 VisualVM:(All-in- ...

  2. C#向其实进程子窗体发送指令

    近日,想在自己的软件简单控制其它软件的最大化最小化,想到直接向进程发送指令,结果一直无效,经过Spy++发现,原来快捷方式在子窗体上,所以需要遍历子窗体在发送指令,以下为参考代码: 1 [DllImp ...

  3. python基础学习——数据容器

    1.数据容器相当于C的数组 有list,tuple(元组),str,set(集合),dict五种数据容器 2.list(列表) 列表中可存在不同的数据类型,可嵌套 #反向索引 name_list = ...

  4. 《Unix/Linux系统编程》第九周学习笔记

    <Unix/Linux系统编程>第九周学习笔记 信号和中断 中断"是从I/O设备或协处理器发送到CPU的外部请求,它将CPU从正常执行转移 到中断处理.与发送给CPU的中断请求一 ...

  5. Linux挂载U盘报错：mount: unknown filesystem type 'ntfs'

    原因:由于Linux上无法识别NTFS格式的分区的原因 解决方法:安装 ntfs-3g 1.下载:wget https://tuxera.com/opensource/ntfs-3g_ntfsprog ...

  6. Windows10系统快速安装.NET Framework3.5的方法&常见问题处理方法

    Windows10系统快速安装.NET Framework3.5的方法&常见问题处理方法 因为我的win10想了办法来禁止自动更新,就无法照正常办法安装.NET Framework3.5,解决 ...

  7. alt_flash_open_dev读写EPCS出现“Cannot open flash device”的解决办法

    转载 http://www.corecourse.cn/forum.php?mod=viewthread&tid=28317 在对EPCS读写操作时alt_flash_open_dev(EPC ...

  8. archlinux 源配置 桌面美化 终端美化 常用软件 grub配置

    简介 本文讲对archlinux进行一些基础系统的配置.常用安装的安装,美化进行配置,先看一下美化后的效果吧 配置pacman和使用AUR(archlinuxcn源) archlinux采用滚动更新的 ...

  9. 文件上传 upload-labs Pass-17 二次渲染

    Pass-17 审计源码 $is_upload = false; $msg = null; if (isset($_POST['submit'])){ // 获得上传文件的基本信息,文件名,类型,大小 ...

  10. 利用Intent在两个页面之间进行传值操作的具体实现

    不知道为什么,我本来使用的呼声最高的Bundle发送,但是我使用它会显示不出来,由于时间问题,我今天就先不找了,先放一下,先以完成任务为己任哈! 我们都清楚,我们基本上都是用的Intent实现的页面之 ...