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

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

参考原文链接：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';exportdefaultdefineConfig({base:"./",plugins:[vue(),legacy({targets:["defaults","not IE 11"],})]});

三、路由配置（可选）
如果你配置了路由，

history

选 createWebHashHistory() 即可。

import{ createRouter, createWebHashHistory }from'vue-router';const router =createRouter({history:createWebHashHistory(),routes:[//...],});exportdefault 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]// 获取标签中的 srclet url = script.getAttribute("src")// 获取标签中的 typelet 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>

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