文章作者

6 个月前

Vite是一个由Vue.js的创作者尤雨溪开发的现代前端构建工具，它主要提供了一个开发服务器，支持原生ES模块的快速冷服务器启动。同时，它还提供了构建命令，使您能够为生产环境提供预编译的最佳性能配置。

Vite具有以下一些特性:

  • 快速冷启动：Vite利用了ESM（ES Modules）进行模块化，这使得它可以在浏览器端进行按需编译，这样就可以实现快速的冷启动。
  • 模块热更新：只有被修改的文件才会重新编译和刷新，使开发体验更加流畅。
  • 预构建依赖：Vite使用rollup打包你的代码，这使得它可以高效地进行构建。
  • 兼容多种现代框架：Vite可以无缝集成Vue, React, Preact等多种现代JavaScript框架。

这么多好处，哪有不用的道理，于是用Vite创建一个React，看看是不是真的这么好～
安装完双击打开，页面白屏，这是什么问题???

先说明一点，因为公司做设备屏幕交互的，所用的框架是Electron + React的解决方案，React项目是放在指定目录，Electron去加载目录的资源，然后chromium打开文件的所在的绝对径路径启动的页面，所以在本地必须要双击能打开，才能在设备上运行起来～（当然也可以起个服务，但是由于历史问题，再加上设备端内存资源紧张，主张降本增效的原则，只能前端含泪解决了）

vite.config.ts 配置如下

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    react(),
  ],
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
});

相对路径我也改了，这不就尴尬了嘛～,双击打开报错如下
20240321111403-index_2024-03-21

看报错似乎是type="module"和crossorigin在标签的缘故，看起来像是浏览器出于安全问题，阻止这个file协议

emmm~

手动删除一下试试呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <script src="./assets/index-D-RU2vVD.js"></script>
    <link rel="stylesheet" href="./assets/index-DiwrgTda.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

再次双击打开，好家伙！协议不报错了，代码开始报错了
20240321113637-index_2024-03-21

再次分析一波，这个好像是没找到dom节点产生的报错，应该是先执行了js后渲染的节点，给js换个位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <link rel="stylesheet" href="./assets/index-DiwrgTda.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="./assets/index-D-RU2vVD.js"></script>
  </body>
</html>

这下没有报错，页面也正常了，那怎么解决呢？

方案1

使用如上方式手动修改(不靠谱)

方案2

使用@vitejs/plugin-legacy这个库，但是还是要手动改(照样不靠谱)

  • 删除所有<script type="module">的东西，一整块都删了
  • 删除所有nomodule关键词
  • 删除id="vite-legacy-entry"所在script标签里的内容并把data-src改成src

方案3

添加chromium启动参数--allow-file-access-from-files，允许file协议（同样不靠谱，但是也算比较适合我公司的项目）

  • Mac
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
  • Windows

20240321114557-vite.config_2024-03-21

我暂时没找到什么好的解决方案，如果你有好的方案不妨说出来，大家互相学习一下

Next post

React国际化实践指南
6 个月前