本示例基于vite-plugin-html插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。 npm create vite@latest 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 npm i vite-plugin-html -D #vite.config.t...
项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。 二、产生原因及解决方法 1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…没有跨域的定义...
第一步:安装vite-plugin-html pnpm i vite-plugin-html@2 -D 第二步:创建build/plugin/html.js build/plugin/html.js import html from 'vite-plugin-html' export function configHtmlPlugin(viteEnv, isBuild) { const { VITE_APP_TITLE } = viteEnv const htmlPlugin = html({ minify: isBuild, inje...
vite.config.ts: import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import vueDevTools from 'vite-plugin-vue-devtools' import { visualizer } from 'rollup-plugin-visualizer'...
vue3-template-admin是一款基于vue3 + vite + element plus的后台管理模版,它集成了我们业务开发的大部分功能,比如文本编辑器,全站搜索,权限管理,可视化图表等。 使用到的插件/库 eslint-plugin-vueeslint-plugin-vue axios强大的前端请求库 fues.jsfues.js 前端模糊搜索 ...
这一套开发框架我们把它命名为MY-Kit。在技术选型上使用的是 Vite + Vue3 + Typescript。 在空白目录执行下列命令: yarn create vite 依次填写项目名称和选择框架为 vue-ts 后,将会自动完成项目的初始化,代码结构如下: . ├── README.md ├── index.html ...
全局安装 vite-app npm i -g vite-app 1. 创建项目 yarn create vite-app <project-name> # 或者 npm init vite-app <project-name> 1. 2. 3. 4. 进入项目,安装依赖 cd <project-name> yarn # 或 npm i 1. 2. 3. 运行项目 yarn dev ...
vite + vue3 打包的文件,如果使用类似于nginx或者其他的服务器打开,可以正常打开,但如果直接点击打开index.html文件,页面会白屏,打开调试工具后发现如下跨域的报错。 直接打开index文件会报跨域错误.png 这是因为打包后并不支持file引用协议。这就给混合式开发等时候带来困扰,因为在这种场景下,是有需要直接打开index....
vite创建项目,Win+R,cmd: 输入vite-vue3 这里我们选择vue 教程建议选择vue,后面会切换成vue-ts,这里我们偏不,就选vue-ts: 这样,我们...
️ vite-plugin-html-template 由于我们需要同时支持 Webpack 和 Vite,在处理我们最终输出的 html 的...