vite打包vue3项目，可以用file://协议访问（可以在android、electron中直接访问）-CFANZ编程社区

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('转换耗时');