VIte+Vue3 打包在FIle本地index.html打开项目（不需要起服务）(vue app打包)

VIte+Vue3 打包在FIle本地index.html打开项目（不需要起服务） VIte+Vue3 打包在FIle本地 index.html 打开项目（不需要起服务）

推荐整理分享VIte+Vue3 打包在FIle本地index.html打开项目（不需要起服务）(vue app打包)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue打包完成的路径设置,vue3.0打包,vue打包文件,vue3打包工具,vue3.0打包,vue打包文件,vue打包后的文件如何运行,vue3.0打包,内容如对您有帮助，希望把文章链接给更多的朋友！

参考原文链接：https://www.jianshu.com/p/41dc11b94c92，增加了一些问题处理。

一、安装插件

pnpm add @vitejs/plugin-legacy

二、配置 vite.config.js

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import legacy from '@vitejs/plugin-legacy';export default defineConfig({base:"./",plugins:[vue(),legacy({targets:["defaults","not IE 11"],})]});

三、路由配置（可选） 如果你配置了路由，history 选 createWebHashHistory() 即可。

import { createRouter, createWebHashHistory } from 'vue-router';const router = createRouter({ history: createWebHashHistory(), routes:[//...],});export default router;

四、修改打包后的 index.html 配置完前三个以后，就可以进行打包了。 下面的那两个报错，是因为缺少了插件。

报错：Cannot find module '@babel/preset-env'安装：pnpm add @babel/preset-env报错：terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.安装：pnpm add terser

打包完后在index.html文件里的 body元素的最后一行加入（必须是最后一行，不然不能在最后执行）

<script> (function (win) { // 获取页面所有的 <script > 标签对象 let scripts = document.getElementsByTagName('script') // 遍历标签 for(let i = 0; i < scripts.length; i++) { // 提取单个<script > 标签对象 let script = scripts[i] // 获取标签中的 src let url = script.getAttribute("src") // 获取标签中的 type let type = script.getAttribute("type") // 获取标签中的js代码 let scriptText = script.innerHTML // 如果有引用地址或者 type 属性 为 "module" 则代表该标签需要更改 if (url || type === "module") { // 创建一个新的标签对象 let tag=document.createElement('script'); // 设置src的引入 tag.setAttribute('url',url); // 设置js代码 tag.innerHTML = scriptText // 删除原先的标签 script.remove() // 将标签添加到代码中 document.getElementsByTagName('head')[0].appendChild(tag) } } })(window) </script>

全部都执行完，就可以使用了。