tauri+vite+vue3开发环境下创建、启动运行和打包发布

这篇具有很好参考价值的文章主要介绍了tauri+vite+vue3开发环境下创建、启动运行和打包发布。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

 1.创建项目

 2.安装依赖  

3.启动项目 

4.打包生成windows安装包 

 5.安装打包生成的安装包


 1.创建项目

 运行下面命令创建一个tauri项目

pnpm create tauri-app

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

我创建该项目时的node版本为16.15.0 

兼容性注意

Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

按需要输入/选择相关信息,一路回车 ,如下图所示,项目就创建成功了。

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 2.安装依赖  

进入tauri-app文件夹

 cd tauri-app

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js  

 运行code .用vscode打开刚创建的tauri-app项目

code .

 安装依赖 

pnpm install

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

3.启动项目 

运行下面命令启动项目

pnpm tauri dev

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 注意:

1.创建项目后,第一次启动项目会非常缓慢,原因是第一次启动项目需要从国外仓库下载多个资源,由于网络原因可能非常缓慢,甚至启动超时报错。这时需要多次运行启动命令。

2.第一次启动成功后,后面再次启动项目时将非常快。

项目启动完成 

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

4.打包生成windows安装包 

运行项目命令打包windows安装包 

pnpm tauri build

注意:新创建的项目,第一次打包会报 “
       Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
 ELIFECYCLE  Command failed with exit code 1.”错误。报这个错误的原因是:第一次打包需要修改src-tauri/tauri.conf.json文件里的配置项"identifier": "com.tauri.dev",改成"identifier": "com.tauri.build",然后再运行打包命令。

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js把 src-tauri/tauri.conf.json文件里的配置项"identifier": "com.tauri.dev",改成"identifier": "com.tauri.build",然后再运行打包命令

 tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js 运行 pnpm tauri build命令会有一个下载依赖包的过程,国内由于GitHub慢原因,导致以下文件下载不了,依旧报错。

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

此时的解决方案:

我们把“https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip“这个链接的压缩包下载到本地。然后在C:\Users\你的用户名\AppData\Local下找到tauri文件夹,如果没有则创建一个名为tauri的文件夹,在文件夹内再创建一个WixTools目录,将下载的压缩包解压到这个文件夹里面(创建依赖包路径: C:\Users\用户\AppData\Local\tauri\WixTools)。然后再回到VSCode运行打包命令。这个时候就可以打包成功了。 

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 创建依赖包路径: C:\Users\用户\AppData\Local\tauri\WixToolstauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 再次执行打包命令

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 打包成功后,打开打包生成的目录,就可以看到一个.msi后缀结尾的安装文件tauri-app_0.0.0_x64_en-US.msiscr-tauri/target/release/bundle/msi/tauri-app_0.0.0_x64_en-US.msi),双击就可以安装了。还有一个可执行包tauri-app.exe(scr-tauri/target/release/tauri-app.exe)。至此,整个创建到打包的流程就完成了。

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 5.安装打包生成的安装包

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

tauri只用vscode可以运行吗,js,桌面端,前端,vue.js

 tauri只用vscode可以运行吗,js,桌面端,前端,vue.js文章来源地址https://www.toymoban.com/news/detail-806268.html

到了这里,关于tauri+vite+vue3开发环境下创建、启动运行和打包发布的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 - 解决 build / dev 打包运行时突然出现一堆 ts 相关的报错,强制关闭整个项目的 ts 代码语法校验和验证(webpack / vite 均可)

    无论您是 vite 还是 webpack,都可以 100% 去掉运行或打包时的 ts 语法验证。 本文 实现了在 vue3 + ts 开发中,关闭运行、打包部署命令时出现的各种 ts 校验报错,去掉对 ts 的验证, 有些朋友对 ts 不是很了解(所以在写代码时没注意一些语法),导致最终 build 打包时出现了很多

    2024年02月11日
    浏览(63)
  • Windows Java JavaFX IntelliJ IDEA 开发环境搭建 创建工程 编译运行 打包分发 自定义运行时

    博文目录 JavaFX 官网 官网 Getting Started with JavaFX JavaFX 是一个开源的下一代客户端应用程序平台,适用于基于 Java 构建的桌面、移动和嵌入式系统。它是许多个人和公司的协作成果,目标是为开发富客户端应用程序生成一个现代、高效且功能齐全的工具包。 JavaFX 主要致力于富

    2024年02月05日
    浏览(153)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(63)
  • vue3 vite 打包 二级目录刷新空白

    控制台报错:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \\\"text/html\\\". Strict MIME type checking is enforced for module scripts per HTML spec. 打包路径问题,修改vite.config.ts文件的base

    2024年02月09日
    浏览(58)
  • vue3 + vite 多项目多模块打包

    vue3 + vite 多项目多模块打包 本示例基于 vite-plugin-html 插件,实现多个独立项目共存,共享组件和依赖,运行、打包互不干扰。 兼容性注意 Vite 需要 Node.js 14.18+、16+版本,有些模板需要更高的版本 虽然创建项目用的14.17.5版本,但是后面运行项目用的18.15.0 HTML模板插件 打包一

    2024年02月10日
    浏览(69)
  • vite打包vue3项目白屏报错

    资源路劲问题 修改:vite.config.ts 原因是需要服务器进行静态资源访问,否则会因为跨域而报错 : Access to script at \\\'file:///F:/Progremes/Vue3/yanxuan_vue3_m_h5/dist/assets/index-49de958d.js\\\' from origin \\\'null\\\' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated

    2024年02月16日
    浏览(57)
  • vite vue3项目打包,跳过ts检查

    遇到这个问题是因为vue文件中script标签没有写lang造成的  剩下的ts类型检查错误  \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查,需要全部解决了才行,可以关闭,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    浏览(60)
  • vite vue3项目打包部署空白页面问题的处理

     问题:vite vue3项目打包部署上线后,发现是空白页面问题的处理 解决方法:1.在我们vite.config.js文件中检查是否有路径的指向                                       2.查看我们的路由模式,将路由模式修改为createWebHashHistory                           

    2024年02月11日
    浏览(60)
  • vite创建vue3项目

    这种方式创建的项目最快捷,因为基本依赖都装好了 这种方式会基于模板创建项目,对于官方模板vue-ts,只带有基础的vue和ts,不带有vue-router、pinia等 以上命令中,\\\"vue-ts\\\"是模板名称 或者使用以下命令然后勾选模板来创建项目 这种方式创建的项目甚至连vite.config.ts都没有,如

    2024年02月05日
    浏览(80)
  • Vite打包Vue3项目,利用宝塔部署到服务器

    按照如图的配置,将vite.config.js的 base 改为  /dist/ 然后npm run build 就会得到左边的这个dist文件夹,这就是打包好的文件 创建项目以及项目配置 我在服务器安装的php是5.6版本的,其他版本可以自己试一下 解决刷新404问题 上传成功之后,文件目录结构是这样的 (顺序不一定要

    2024年04月13日
    浏览(84)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包