vue3项目打包成单个html文件

vue3项目打包成单个html文件

  1. 将vue框架也打包进去

    1. 安装依赖

      • npm install vite-plugin-singlefile --save-dev

    2. 修改vite.config.js

      • import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteSingleFile } from 'vite-plugin-singlefile';
export default defineConfig({
    plugins: [
        vue(),
        viteSingleFile(),
    ],
    build: {
        // 不压缩代码
        minify: false,
    },

})

    3. 路由设置

      • history: createWebHashHistory("/") //这里使用hash

    4. 打包

      • npm run build

  2. 如果想要将vue框架通过cdn引入

    1. 安装依赖

      • npm install vite-plugin-singlefile --save-dev

    2. index.html中使用cdn引入vue

      • <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue3</title>
    <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

    3. 修改vite.config.js

      • import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({
  plugins: [
    vue(),
    viteSingleFile()
  ],
  build: {
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
        // 设置输出格式为 IIFE，这样打包时不会保留 import 语句
        format: 'iife'
      }
    }
  }
})

    4. 路由设置

      • history: createWebHashHistory("/") //这里必须使用hash

    5. 打包

      • npm run build

  3. 如果想要将element-plus也通过cdn引入, 需要修改成如下

    index.html

    • <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue3</title>
    <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
    <!-- CDN 引入 ElementPlus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- CDN 引入 ElementPlus -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

    main.js

    • import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

    vite.config.js

    • import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({
  plugins: [
    vue(),
    viteSingleFile()
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'element-plus', 'element-plus/dist/index.css'],
      output: {
        globals: {
          vue: 'Vue',
          'element-plus': 'ElementPlus'
        },
        format: 'iife'
      }
    }
  }
})

‍

posted @ 2025-03-23 18:09  hyd666  阅读(242)  评论(0)    收藏  举报