vue3项目打包成单个html文件
-
将vue框架也打包进去
-
安装依赖
-
npm install vite-plugin-singlefile --save-dev
-
-
修改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,},})
-
-
路由设置
-
history: createWebHashHistory("/") //这里使用hash
-
-
打包
-
npm run build
-
-
-
将vue框架通过cdn引入
-
安装依赖
-
npm install vite-plugin-singlefile --save-dev
-
-
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>
-
-
修改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({// 使用正则表达式跳过 vue 模块的内联skip: [/^vue/]})],build: {rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue'},// 设置输出格式为 IIFE，这样不会保留 import 语句format: 'iife'}}} })
-
-
路由设置
-
history: createWebHashHistory("/") //这里必须使用hash
-
-
打包
-
npm run build
-
-
-
如果想要将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({// 跳过对 vue 和 element-plus 模块的内联skip: [/^vue/, /^element-plus/]})],build: {rollupOptions: {external: ['vue', 'element-plus'], // 声明 vue 和 element-plus 为外部依赖output: {globals: {vue: 'Vue','element-plus': 'ElementPlus'},// 输出格式设置为 iife，以便全局变量可以正常工作format: 'iife'}}} })
-
