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. SqlServer提示对象名无效

    执行脚本 exec sp_msforeachtable "sp_changeobjectowner '?','dbo'"

  2. C#实现控制台打印年历

    C#实现控制台打印年历 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System. ...

  3. WordPress标题分隔符”-“被转义为“&#8211”怎么办？

    按照百度搜索资源平台<百度搜索网页标题规范:让标题回归标题本身>百度官方文档参考,如果WordPress标题里出现不规范"– 2.停止wptexturize转义任何字符 add_ ...

  4. NVT模拟时出现水分子空洞，以及NPT时盒子收缩的原理

    NVT出现水分子空洞,以及NPT时盒子收缩的原理: For a periodic system, constant pressure is the only way to equilibrate de ...

  5. winform导出excel报'object' does not contain a definition for 'get_Range'的问题

    现手上有个老项目采用.net framework3.0开发,改成4.0后,excel导出报'object' does not contain a definition for 'get_Range'的 ...

  6. el-admin角色编辑功能详解

    1.首先el-admin中的编辑和删除功能重新写成为了一个组件 data和permission都是父组件向子组件传参.data传的是当前表格中选中行的这条数据,permission是定义的一个对象. ...

  7. 02-Spring基于XML的Bean属性注入

    属性值注入:就是给属性赋值 创建一个Account类: public class Account implements Serializable { private int aid; private ...

  8. Pod概述

    Pod的类型 Pod的类型有如下两个: 自主式Pod:自主式Pod的含义简白来说就是不是被控制器管理的Pod,另一种就是被控制管理的Pod,不被控制器管理的Pod你会发现,它一旦死亡的话,就没有人把它 ...

  9. yhm的丘赛题解（其中的一些简单题）

    有选择地做了丘赛里的一些简单题,不定期更新     目录 [简单组合数学]2011丘赛个人[应数计算数学概统]第3题题解 [拉格朗日多项式插值]2011丘赛个人[应数计算数学概统]第2题题解 [概率] ...

  10. hdfs的异构存储

    目录 1 背景 2 hdfs异构存储类型和存储策略 2.1 hdfs支持的存储类型 2.2 hdfs如何知道数据存储目录是那种存储类型 2.3 存储策略 2.3.1 在hdfs中支持如下存储策略 2. ...