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';
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>
全部都执行完,就可以使用了。