vue3 + vite 多项目多模块打包

这篇具有很好参考价值的文章主要介绍了vue3 + vite 多项目多模块打包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3 + vite 多项目多模块打包

本示例基于vite-plugin-html插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。

npm create vite@latest

vue3 + vite 多项目多模块打包

兼容性注意

Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本

vue3 + vite 多项目多模块打包

虽然创建项目用的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

vue3 + vite 多项目多模块打包

目录改造

 beijing.html
 nanjing.html
src
 - beijing
   - App.vue
   - main.ts
 - nanjing
   - App.vue
   - main.ts

新增文件(项目模板):beijing.htmlnanjing.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.vuebeijing/main.tsnanjing/App.vuenanjing/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.vuenanjing/main.ts 内容略(把北京的复制一份)

注意文件路径,例如:vite.svgvue.svgstyle.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]",
            }
        }
    }
})

打包结果

vue3 + vite 多项目多模块打包

我这的java项目集成的是FreeMarker
把项目模板beijing.html改成beijing.ftl,修改文件里对应的静态资源路径,
前端打包之后,把dist下面的文件同步到java项目的static目录。

别名配置

ts 配置,新增项 baseUrltypespaths

# 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"文章来源地址https://www.toymoban.com/news/detail-497747.html

到了这里,关于vue3 + vite 多项目多模块打包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+Vite+TypeScript常用项目模块详解

      目录 1.Vue3+Vite+TypeScript 概述 1.1 vue3  1.1.1 Vue3  概述 1.1.2 vue3的现状与发展趋势 1.2 Vite 1.2.1 现实问题 1.2 搭建vite项目 1.3 TypeScript 1.3.1 TypeScript 定义 1.3.2 TypeScript 基本数据类型  1.3.3 TypeScript语法简单介绍 2. 项目配置简单概述 2.1 eslint 校验代码工具配置 2.1.1 eslint定义 2.1.2 esl

    2024年02月08日
    浏览(41)
  • vite+vue3+ts项目中提示无法找到模块

    今天在开发过程中碰到了导入模块时提示无法找到模块这个问题,分享一下我的解决思路 首先产生这个错误是: 无法找到模块XXX,并且提示\\\'XXX\\\' is declared but its value is never read 产生这个问题的原因是我们使用了ts语法,他只能识别.ts文件,并不能识别.vue文件,所以在引入组件

    2024年02月11日
    浏览(55)
  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(82)
  • vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

    使用vite-plugin-cdn-import 下载npm包 官方github:https://github.com/MMF-FE/vite-plugin-cdn-import 开发环境使用本地的npm包,cdn是打包时候才生效 在vite.config.ts中通过importToCDN引入 注意事项 :网上很多教程,还需要在 build 的 rollupOptions 添加对应的 external ,如上注释所示,其实是不需要的,

    2024年02月02日
    浏览(103)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(64)
  • Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)

    这里因为我们有的小伙伴可能不太需要服务器,单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上,有很多方式,自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的,我这里使用的虚拟机+centos系统,我已经提前在自己的机器安装好了。

    2024年02月05日
    浏览(90)
  • vue3之vite创建h5项目1(创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名)

    初始化项目模块 添加环境变量文件,每个文件写入配置,定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境 在项目根目录下创建 03-1:配置多环境变量之dev环境 .env.development 03-2:配置多环境变量之test环境 .env.test 03-3:配置多环境变量之prod环境 .env.production 03-4 修改

    2024年02月02日
    浏览(83)
  • VIte+Vue3 打包在FIle本地index.html打开项目(不需要起服务)

    参考原文链接:https://www.jianshu.com/p/41dc11b94c92,增加了一些问题处理。 一、安装插件 二、配置 vite.config.js 三、路由配置(可选) 如果你配置了路由, history 选 createWebHashHistory() 即可。 四、修改打包后的 index.html 配置完前三个以后,就可以进行打包了。 下面的那两个报错,

    2023年04月22日
    浏览(52)
  • 【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析

    rollup-plugin-visualizer 是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用 rollup-plugin-visualizer 插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文

    2024年02月07日
    浏览(54)
  • vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

    目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、打开Vue 项目管理器 六、Vite + Vue 项目目录结构 七、Vite.config.ts配置 前提条件 熟悉命令行 已安装 16.0 或更高版本的 Node.js 同时按window+R键,输入cmd,打开命令提

    2024年01月21日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包