创建 Tauri + Vue + Typescript + Vite + Less 应用

niuiic

已于 2022-05-01 18:14:39 修改

阅读量2.3k

点赞数

分类专栏： rust vue 文章标签： vue typescript less rust

于 2021-06-04 14:52:52 首次发布

本文链接：https://blog.youkuaiyun.com/niuiic/article/details/117561466

版权

本文介绍了如何创建一个结合Tauri、Vue.js、Typescript、Vite和Less的项目。首先，你需要按照官方文档配置环境，然后参照特定教程来初始化项目。在项目创建过程中，要注意目录结构和配置文件的设定，特别是Tauri应用的目录和URL。在开发阶段，你可以使用`tauri dev`进行调试，而在打包阶段，利用`tauri build`将项目打包为deb和AppImage格式。在某些情况下，你可能需要解决Vite与Tauri名称相同导致的错误，并根据需要安装额外的打包工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多分享内容可访问我的个人博客

https://www.niuiic.top/

更新：本文内容已不适用于最新版本，若遇到相同问题可以继续参考。要创建项目首先按https://tauri.studio/docs/getting-started/prerequisites/配置环境，然后参考https://github.com/niuiic/develop-tools中关于tauri的内容。

项目创建流程

直接上代码

app_init.sh

templatePath=xxx
echo "What's your app's name?"
read appName
yarn create @vitejs/app $appName --template vue-ts
cd $appName
yarn set version berry
cp "$templatePath/tauri/yarnrc.yml" .yarnrc.yml
yarn install
yarn add less -D
yarn add eslint eslint-plugin-vue -D
yarn add @vuedx/typescript-plugin-vue -D
rm ./tsconfig.json
cp "$templatePath/tauri/tsconfig.json" tsconfig.json
rm src/shims-vue.d.ts
rm vite.config.ts
cp "$templatePath/tauri/vite.config.ts" vite.config.ts
cp "$templatePath/tauri/tauri-plugin.ts" tauri-plugin.ts
yarn add tauri @types/sharp
yarn add @rollup/plugin-replace -D
yarn tauri init

$templatePath自定，注意模板文件在$templatePath/tauri下。

以上涉及的几个文件放在下面。

yarnrc.yml

yarnPath: ".yarn/releases/yarn-berry.cjs"
nodeLinker: node-modules
npmRegistryServer: "https://registry.npm.taobao.org/"

tauri-plugin.ts

import {
    TauriConfig } from "tauri/src/types";
import type {
    Plugin, ConfigEnv, ResolvedConfig } from "vite";
import tauriConf from "./src-tauri/tauri.conf.json";
import dev from "tauri/dist/api/dev";
import build from "tauri/dist/api/build";
import replace from "@rollup/plugin-replace";
import {
    isAbsolute, resolve } from "path";

interface Options {
   
  config?: (c: TauriConfig, e: ConfigEnv) => TauriConfig;
}

export default (options

最低0.47元/天解锁文章