首页 前端知识 VIte Vue3 打包在FIle本地index.html打开项目(不需要起服务)

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

2024-02-11 10:02:45 前端知识 前端哥 907 93 我要收藏

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>

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1760.html
标签
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!