脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 vite多项目打包

vue3+vite多项目多模块打包(基于vite-plugin-html插件)

 更新时间：2023年07月04日 11:47:07   作者：百变魔旅  
这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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" rel="external nofollow"  />
    <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多项目多模块打包的文章就介绍到这了,更多相关vue3 vite多项目打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue实现点击导航栏滚动页面到指定位置的功能(推荐)

    vue实现点击导航栏滚动页面到指定位置的功能(推荐)

    这篇文章主要介绍了vue实现点击导航栏滚动页面到指定位置的功能(推荐),步骤一是是通过获取不同板块的滚轮高度,步骤二通过编写执行滚动操作的函数,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • elementui之el-tebs浏览器卡死的问题和使用报错未注册问题

    elementui之el-tebs浏览器卡死的问题和使用报错未注册问题

    这篇文章主要介绍了elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
    2019-07-07
  • vue实现水波涟漪效果的点击反馈指令

    vue实现水波涟漪效果的点击反馈指令

    鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的,这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。
    2021-05-05
  • vue项目中使用AvueJs的详细教程

    vue项目中使用AvueJs的详细教程

    Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，这篇文章给大家介绍了vue项目中使用AvueJs的相关知识，感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • vue-router之解决addRoutes使用遇到的坑

    vue-router之解决addRoutes使用遇到的坑

    这篇文章主要介绍了vue-router之解决addRoutes使用遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue-socket.io接收不到数据问题的解决方法

    vue-socket.io接收不到数据问题的解决方法

    这篇文章主要介绍了解决vue-socket.io接收不到数据问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue将页面导出为图片或者PDF

    Vue将页面导出为图片或者PDF

    这篇文章主要为大家详细介绍了Vue导出页面为PDF格式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Vue开发之watch监听数组、对象、变量操作分析

    Vue开发之watch监听数组、对象、变量操作分析

    这篇文章主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • 关于Element table组件滚动条不显示的踩坑记录

    关于Element table组件滚动条不显示的踩坑记录

    这篇文章主要介绍了关于Element table组件滚动条不显示的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue使用echarts绘制柱状图和折线图

    Vue使用echarts绘制柱状图和折线图

    这篇文章主要为大家学习介绍了Vue如何使用echarts绘制柱状图和折线图,文中有详细的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08

最新评论