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. JSTL练习

    求:request 域中有一个存有 user 对象的 ist 集合.需要使用 jstltel 将 list 集合故据展示到 jsp 页面的表格 table表格中 List list = new Arr ...

  2. 使用ansible批量推送公钥

    准备两个yml文件 send-pubkey.yml - hosts: all remote_user: root # 连接远程主机的用户,密码就是文件中设置好的 ansible_ssh_pass 的值 ...

  3. ubuntu14.04 cm12.0 genymotion

    前几天在ubuntu14.04编译过android5.0.1源码,但是呢?不知怎么运行不起来,后来又试了试把img文件在win平台运行虚拟机不知怎么还是不行,再后来想通过刷机运行学习framework ...

  4. python中的反射机制

    转自https://www.cnblogs.com/renjie1105/p/15909285.html python反射简介 在做程序开发中,我们常常会遇到这样的需求:需要执行对象里的某个方法,或需 ...

  5. Visual Studio Tools for Apache Cordova 使用web技术构建使用Ios Andriod 和 windows 的应用

    1.vs 开发web app 2.官方的解说

  6. 【Airtest相关】收集一些Airtest的介绍

    1.项目简介 ui自动化一直是个让人头疼的事,主要是因为系统兼容性难度较大和开发维护成本比较高, 以前使用过appium,通用性比较差,并且开发有一定的基础才行,更难以忍受的是后期的维护成本:然后接触 ...

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

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

  8. 基于 Agora SDK 实现 iOS 端的多人视频互动

    视频互动直播是当前比较热门的玩法,我们经常见到有PK 连麦.直播答题.一起 KTV.电商直播.互动大班课.视频相亲等. 本文将教你如何通过声网Agora 视频 SDK 在iOS端实现一个视频直播应用. ...

  9. TypeScript 学习笔记 — 类型兼容 （十）

    目录 一.基本数据类型的兼容性 二.接口兼容性 三.函数的兼容性 四.类的兼容性 类的私有成员和受保护成员 五.泛型的兼容性 六.枚举的兼容性 标称类型简短介绍 TS 是结构类型系统(structur ...

  10. 使用 DeepSpeed 和 Hugging Face 🤗 Transformer 微调 FLAN-T5 XL/XXL

    Scaling Instruction-Finetuned Language Models 论文发布了 FLAN-T5 模型,它是 T5 模型的增强版.FLAN-T5 由很多各种各样的任务微调而得,因 ...