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. win10下Word点击链接跳转，提示“由于本机的限制，该操作已取消”

    Word按住Ctrl点击链接进行跳转,提示"由于本机的限制,该操作已取消,请联系管理员" 网上很多,修改注册表 这边要说的是,修改重启word ,还不行的解决方法:点开任务管理器- ...

  2. excel编辑受限的密码保护破解

    录制一个宏并且执行: Public Sub 工作表保护密码() Const DBLSPACE As String = vbNewLine & vbNewLine Const AUTHORS A ...

  3. python 调试 qml

    1.设置pycharm的parameters -qmljsdebugger=port:10002,block 2.python 启动调试: 点击debug按钮 3.设置qt creater qt cr ...

  4. 继承和组合关系: is a & has a

    继承:is-a 比如 营销人员类 和 开发人员类 都继承自 职工类,营销人员 is-a 职工.组合:has-a 比如 汽车类 包含一个 发动机类 的对象,汽车 has-a 发动机.

  5. 03-Spring使用注解方式注入

    基于注解的DI注入 1.导包 环境搭建:导入aop包(spring-aop-4.1.6.RELEASE.jar) 2.创建类 3. 创建spring.xml配置文件(必须在src目录下) 该配置文件与 ...

  6. 样例1-http接口的waiting(TTFB)时间从5.5s优化为100ms

    问题 :如何解决网页响应慢,waiting(TTFB)时间过长,接口返回耗时等问题? 首先需要了解什么是Waiting (TTFB) 时间?TTFB 是Time to First Byte 的缩写,指 ...

  7. kali更新源数字签名错误解决办法

    apt-get update更新时出现错误,提示Release文件已经过期,无论是使用kali官方源还是阿里源.中科大源都报该错误. 网上查找相关资料,签名出错需要下载数字签名,方案如下: wget ...

  8. GPT-4 来了！这些开源的 GPT 应用又要变强了

    近日,在 GPT-3.5 发布的半年后,OpenAI 正式推出了大版本的 GPT-4,不同于 GPT-3 到 GPT-3.5 耗时两年,这次版本升级只用了半年.如果你对 OpenAI 不熟悉,答应我读 ...

  9. 逍遥自在学C语言 | 关系运算符

    前言 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 -- 自在. 第二位上场的是和我们一起学习的小白程序猿 -- 逍遥. 二.构成和表示方式 关系运算符的作用是判断符号两边大小的关系 ...

  10. [SVN]SVN checkout 功能不可用 右键只看到提交和更新，没有显示checkout[转载]

    不要在受SVN控制的文件夹里点右键,因为这个文件夹已经在SVN控制之下,当然不会允许在里面嵌套另一个SVN版本库 换个不受控的文件夹点右键,比如: D盘根目录 X 参考文献 SVN checkout ...