vue3作为国内主流开发框架,而vite又是vue团队推荐打包工具,在大多数的项目中都是部署在服务器上,通过http://协议访问ip、域名,但是在一些混合式开发如android或者electron中需要提供的html页面,然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要是打包后要支持非esmodule的方式,
var code = "cc1be642-8c76-423f-a365-35d09f109f3a"
目前已经搜集到两种方案:
方案一:打包成一个文件
step1:安装 vite-plugin-singlefile
npm i vite-plugin-singlefile
step2: 配置@vite-plugin-singlefile相关内容,在vite.config.ts(js)中修改
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { viteSingleFile } from 'vite-plugin-singlefile';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteSingleFile(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
build: {
minify: false,
},
});
step3: 进行打包
一般正常的项目直接build
step4:测试
方案二:打包成多文件,需要改动部分
step1: 安装 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy
step2: 配置@vitejs/plugin-legacy相关内容,在vite.config.ts(js)中修改
// 引入
import legacy from '@vitejs/plugin-legacy';
// 插件处
plugins:[
legacy({
targets:['defaults','not IE 11']
}),
vue()
]
step3: 进行打包
一般正常的项目直接build
step4:修改打包后的文件
step5: 进行测试
到此结束
注:快捷替换脚本(目前测试有点问题)
/**
* vue 一键修复 改为本地
* vite.config.js 请先配置 @vitejs/plugin-legacy 和 base:'./'
* 参考:http://events.jianshu.io/p/d44d14bc5344
* 配置完成后 路径正常后 再 node toFile.js
* 作者:Yoyo
*/
import path from 'path';
import fs from 'fs';
console.time('转换耗时');
const distPath = './dist/index.html';//打包路径的index.html
let htmlText = fs.readFileSync(distPath, 'utf8');
let resultText = '';
let htmlArr = htmlText.split(/\r?\n/) || [];
htmlArr.forEach(str => {
str = str.replace(/\s?nomodule\s?/g,' ');
str = str.replace(/\s?crossorigin\s?/g,' ');
str = str.replace(/data-src/g,'src');
if(!/type="module"/i.test(str)) resultText += str;
});
fs.writeFileSync(distPath,resultText,'utf8');
console.timeEnd('转换耗时');