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. 通过右键菜单生成pyd

    批处理 @echo off reg add "HKCR\AllFilesystemObjects\shell\构建PYTHON\command" /ve /t REG_SZ /d ...

  2. 【帆吖】Java学习零基础17

    Java方法 1 package method; 2 3 public class Demo1 { 4 //main方法 5 public static void main(String[] args ...

  3. svn备份迁移

    参考链接: SVN版本库的迁移 dump的详细使用 https://www.iteye.com/blog/tdcq-1684344 svn备份与还原_脚本_(dump命令)

  4. vs2019远程调试win7系统的程序

    vs2019远程调试   一.安装vs2019远程调试工具 首先让调试的电脑(也就是不安装vs2019的电脑),安装vs2019远程调试工具:VS_RemoteTools.exe. 网址:进行下载.h ...

  5. 微信小程序中注册页面设计

    .wxml <text>姓名</text> <input placeholder="请输入姓名" bindinput="getname&qu ...

  6. LaTeX in 24 Hours - 书籍信息

    书籍信息 书名: LaTex in 24 Hours: A Practical Guide for Scientific Writing 作者: Dilip Datta 出版日期: 2017 ISBN ...

  7. Gym - 101845E （图形转换思维）

    题意:给你个边长为n(1 <= n <= 50)的下图这种三角形,图形所有点构成集合.找多少对a,b满足条件,条件为:ab两点之间还有其他点. 题解:刚开始以为直接找规律就行,wa了两次发 ...

  8. SpringBoot——自定义自动配置与起步依赖

    SpringBoot--自定义自动配置与起步依赖 SpringBoot为我们提供了灵活强大的自动配置与起步依赖功能,接下来我们参考其实现原理,实现专属于我们自己的自动配置与起步依赖. 不仅如此,我们对 ...

  9. webpack原理(1)：Webpack热更新实现原理代码分析

    热更新,主要就是把前端工程 文件变更,即时编译,然后通知到浏览器端,刷新代码. 服务单与客户端通信方式有:ajax 轮询,EventSource.websockt. 客户端刷新一般分为两种: 整体页面 ...

  10. mybatisplus数据层标准开发---分页功能

    1.创建一个拦截器类 package com.itheima.config; import com.baomidou.mybatisplus.extension.plugins.MybatisPlus ...