vue3+vite+ts项目打包后打开dist文件夹中的index.html时页面一片空白

起因:想看一下做的项目的静态版本

问题:通过npm run build 打包后,点击dist文件夹中的index.html时页面一片空白;

解决方案:

1、文件路径不对

vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置

2、跨域问题

vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…没有跨域的定义
需要安装vite插件@vitejs/plugin-legacy

npm i @vitejs/plugin-legacy -D


安装成功之后在vit.config.js引入并使用

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序需要进行以下步骤: 1. 安装 Electron:使用 npm 安装 Electron,可以通过以下命令进行安装: ``` npm install electron --save-dev ``` 2. 创建主进程文件:在根目录下创建一个名为 `electron.js` 的文件,并在其编写 Electron 的主进程代码。 3. 修改 `package.json` 文件:将 `main` 属性的值设置为 `electron.js` 文件的路径,如下所示: ``` { "name": "your-app", "version": "0.0.1", "main": "electron.js", ... } ``` 4. 构建应用程序:在命令行运行以下命令,将 Vite + Vue3 + TypeScript 项目构建成可在 Electron 运行的应用程序。 ``` npm run build ``` 5. 打包应用程序:使用 Electron Builder 打包应用程序,可以使用以下命令进行安装: ``` npm install electron-builder --save-dev ``` 然后,在 `package.json` 文件添加以下代码: ``` { "build": { "appId": "your.app.id", "productName": "Your App Name", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "electron.js", "node_modules/**/*" ], "extraFiles": [ "assets/**/*" ], "mac": { "category": "your.app.category.type" }, "win": { "target": "nsis" } } } ``` 6. 打包应用程序:在命令行运行以下命令,将 Vite + Vue3 + TypeScript 项目打包成可执行文件。 ``` npm run electron:build ``` 以上步骤是将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序的基本步骤。根据自己的实际需求,可以进行一些额外的配置和修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值