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日
    浏览(72)
  • Windows Java JavaFX IntelliJ IDEA 开发环境搭建 创建工程 编译运行 打包分发 自定义运行时

    Windows Java JavaFX IntelliJ IDEA 开发环境搭建 创建工程 编译运行 打包分发 自定义运行时

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

    2024年02月05日
    浏览(13)
  • 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日
    浏览(37)
  • vue3 + vite 多项目多模块打包

    vue3 + vite 多项目多模块打包

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

    2024年02月10日
    浏览(50)
  • 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日
    浏览(14)
  • vite打包vue3项目白屏报错

    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日
    浏览(12)
  • vite vue3项目打包,跳过ts检查

    vite vue3项目打包,跳过ts检查

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

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

    vite vue3项目打包部署空白页面问题的处理

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

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

    vite创建vue3项目

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

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

    Vite打包Vue3项目,利用宝塔部署到服务器

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

    2024年04月13日
    浏览(76)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包