Vue3+Vite

Vue3+Vite打包跨平台(七牛、阿里OSS)上传部署前端项目

1、业务场景阅读之前，想了解一下各位观众老爷们，你们公司的项目是怎么部署的：1.本地打包手动上传服务器；2.本地打包自动上传服务器；3.代码仓库流水线自动构建；4.其他…；我们用的第3种部署方式，仓库代码合并到release之后自动打包部署，不过这个过程很耗费时间，且流水线是要收钱的。有一天，流水线到期了，部门主管打算节约成本，于是就开始让我们自己写一个脚本，用来部署公司项目；前端静态资源(项目图
领秀5858·2024-01-11 22:17

细节！！！整理Vue项目中的那些环境变量

但是我这里想去给他专个明白，因为基于传统Vue2+Webpack的项目与Vue3+Vite**的项
放荡不羁的小雨鸽·2024-01-11 05:03

vue3+vite +element plus日历date picker中文显示

项目情况element-plus默认是英文模式，需要中文模式的话需要设置一下：项目框架（vue3）：vite+JS+element-plus版本：（注意版本兼容，elementplus较低版本：1.xx.xx，不一定适合此法"element-plus":"^2.4.4","vue":"^3.0.4"elementPlus是按需导入，需要使用el-config-provider.nullAVue3b
Lan.W·2024-01-08 03:58

vue3+vite配置静态路由

1.安装路由npminstallvue-router--save2.新建router/index.js文件文件内容import{createRouter,createWebHistory}from'vue-router'importHomefrom'../view/home.vue'constroutes=[{path:"/",name:"index",redirect:"/home",//这个得
在线小白www·2024-01-07 21:44

SVG 文件的引入方式之一：以 URL 的方式引入 SVG 文件，vue2、vue3+Vite vite-svg-loader

SVG文件的引入方式之一：以URL的方式引入SVG文件，vue2、vue3+Vitevite-svg-loader〇、前言：本篇将介绍：vue2使用require()引入svg使用vue3+ts+vite使用vite-svg-loader插件引入svg使用并最终实现代码提示一样使用图标文件一、问题描述我有一个长期维护的开源项目：《标题日记》。近期想从原来的vue2改成现在的vue3+ts+vite
十月ooOO·2024-01-03 14:01

vue3+vite 项目常用库

特别注意：需要使用管理员权限来打开命令提示符，不然会出现各种报错yarnnpminstall-gyarnvite1.使用vite创建项目yarncreatevite2.安装包和运行yarnyarndev3.在vscode安装volar插件和AntDesignVueHelper插件需要注意的是volar与vetur插件相冲突，所以得禁用vetur4.静态文件打包public目录下的静态文件要使用相对
班长胡一可·2024-01-02 22:21

vue3+vite中使用vuex

1.第一种方式在main.ts中创建一个新的store实例import{createStore}from'vuex'//创建一个新的store实例conststore=createStore({state(){return{username:'张三'}},mutations:{changeName(state:any,us:string){state.username=us;}}})constap
程序员正茂·2023-12-30 05:46

vue3+vite组件中使用Cesium粒子系统

一、注意事项1.图片的引用路径必须从根目录（即index.html所在的目录）开始，如果使用相对路径，也要返回到根目录再转到对应的目录。//第一种，直接从根目录开始image:'src/assets/particles/BlowingSnow.png'//第二种，相对路径先返回到根目录，再转到对应目录image:'../../src/assets/particles/BlowingSnow.png
程序员正茂·2023-12-30 05:10

Vue3 +Vite项目部署遇见的问题

项目场景：Vue3+Vite部署单页。参考链接：Vue3ViteJavaScript问题描述在部署Vue3项目时，敲入命令npmrundev，显示Vite不是内部或外部命令。
buzzaz·2023-12-25 07:34

在 Vue3 +Vite环境中使用.env 环境配置文件

在Vue3+Vite环境中使用.env环境配置文件1、安装dotenv2、项目根目录创建.env相关环境配置文件3、在页面或者组件使用当前运行环境配置1、安装dotenvnpminstalldotenv
头上一片天空·2023-12-23 01:40

vue3+vite静态页面部署到gitee pages

vue3+vite静态页面部署到giteepagesgitee创建开源仓库修改项目部署到gitee中随着vue3的成熟，vue2将在2023.12.31停止维护，所以有必要搞一下vue3项目静态页面怎么部署到
demo11111111·2023-12-21 07:04

【VUE】vue3+vite中process.env的配置方法

问题详情在request.js中，使用process.env.BASE_API，需要对请求路径进行全局配置//创建axios实例constservice=axios.create({baseURL:process.env.BASE_API,//api的base_urltimeout:5000//请求超时时间})解决方法在vite.config.js中，添加define:{'process.env'
RogerQianpeng·2023-12-16 03:36

vue3+vite动态路由的实现方式

动态路由的实现方式在vue项目要想实现路由的动态控制，有两种主流的实现方向。基于用户角色判断路由，并且在后端接口进行权限管理基于用户信息单独返回配置的路由信息对于第一种方法，其优点在于不用后端单独配置路由信息，当用户登陆时可直接根据用户的角色进行前端的路由控制。缺点在于每个用户都可以看到页面的所有路由信息，此时则需要后端单独对接口设置不同的角色权限。对于第二种方法，其优点在于每个用户都可以配置自己
✎﹏ℳ๓₯㎕·2023-12-15 02:46

vue3项目安装vite-plugin-mock 项目报错

vue3+vite项目安装了vite-plugin-mock之后，根据官网配置使用，vscode会出现波浪线，启动项目，发现运行不了解决办法：安装vite-plugin-mock2.9.6的版本即可pnpminstallmockjsvite-plugin-mock
张小帆的博客·2023-12-06 03:26

vue3+vite搭建cesium项目

1.创建项目cnpmcreatevite2.安装依赖npmicesiumvite-plugin-cesiumvite-D3.在vite.config.js里进行配置import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importcesiumfrom'vite-plugin-cesium';exportdefaultdefin
m0_63701303·2023-12-03 19:30

vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“)

参考文章：https://www.cnblogs.com/cokolxvd/p/15661086.html按需自动引入elementUI首先需要插件unplugin-vue-components和unplugin-auto-importnpmiunplugin-vue-componentsunplugin-auto-import根据elementUIplus官网说明快速开始.需要在vite.con
苏米素·2023-12-02 17:21

excel表格在线编辑（开源版）

vue3+vite例子vue3+vite引入样式及脚本安装所需依赖（excelj
失眠时间·2023-12-02 12:33

vue3+vite在若依项目中使用scss全局变量、公共颜色

做项目一般都需要设置公共的颜色、字体、文字大小等css变量，如果不设置这些css变量的话，项目中颜色来回复制，等需要改变的时候，每个页面都需要进行替换，使用scss的css变量之后，在每个页面使用变量就能达到统一的目的。第一步创建scss文件在src/assets/styles目录下创建self.scss第二步创建变量在self.scss中创建需要的变量，如图，变量需要前面带$符，变量后面最好自己
咸虾米_·2023-12-02 09:24

vue3+vite如何兼容低版本的白屏问题(安卓7/ios11)

1.安装legacynpminstall@vitejs/plugin-legacy--save-dev2.在vite.config.jsimportlegacyfrom'@vitejs/plugin-legacy'//引入exportdefault{plugins:[//加入这个legacy({targets:['Chrome64'],modernPolyfills:true}),],}
lipenghao111·2023-12-02 03:46

vue3+vite 批量引入局部组件及使用

目录结构批量引入组件例如：src/views/oss/components/customComponents.tsimport{ref,defineAsyncComponent,markRaw}from'vue';constmodules=import.meta.glob('./*.vue');//这告诉TypeScript，components.value是一个键为字符串、值为defineAsy
我总是词不达意·2023-12-01 02:44

第二章：VUE3学习（二）----vue3+vite创建项目

在上一篇文章我们已经配置好了环境变量，接下来这一章将在此环境上创建项目。1.使用cmd命令窗口创建项目1.1win键+R键在弹出的运行窗口中输入cmd如下图在弹出的对话框中，使用命令行进入到你要创建项目的文件夹，我的就放在了E：development\vue\vue3中。1.2创建项目然后使用以下命令创建项目：[email protected]接着进行以下操作然后根据提示启动项目安装完成如下提示
fly1157932256·2023-11-30 10:50

【vue3】vue3-json-viewer使用

在使用vue3+vite开发时，发现需要用到显示json数据组件，发现vue-json-viewer只能兼容vue2，于是花了一个小时，重写的vue3的适配。
不停喝水·2023-11-30 05:32

Vue 3 + vite技术架引入静态文件的问题（require和import方式）

Vue3+vite技术架无法使用require()的方式引入静态文件使用Vue3+vite技术架开发过程中，引入静态资源时，习惯性使用require()引入，突然发现报错了。
start_sea·2023-11-29 11:23

【Vue3+Vite】解决build后空白页的问题

目录Hash模式HTML5模式（历史模式）配置Nginx配置SpringBootHash模式build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个404错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。配置：impo
寂夜江潮·2023-11-27 15:08

uniapp vue3+vite 小程序转H5

记录一下小程序转H5遇到的问题目录1.图片src无效时显示白框2.请求显示跨域3.小程序中样式写100vh正好满屏，在H5中100vh会因为标题栏的问题超出一部分4.H5端不支持保存图片的API5.H5打包文件引用路径不对6.打包后有些样式丢失7.打包后uni的方法丢失，报错xxxisnotafunction1.图片src无效时显示白框解决方法：css设置状态img[src=""],img:not
哈大饼·2023-11-26 10:14

Vue3+vite 处理静态资源，解决服务器不显示动态循环img问题

但在vue3+vite中，不支持require语法，因此使用require会报undefined，所以官方推荐使用import来动态渲染静态资源。
爱吃鱼的酱酱仔·2023-11-25 12:46

vue3+vite使用import.meta.glob实现自动引入文件全局注册

背景以往在vue中注册全局组件，都是需要先手动引入需要注册全局组件的文件，然后挨个注册，//在main.ts中importAComfrom'@/components/A.vue';importBComfrom'@/components/B.vue';Vue.component('a-com',ACom);Vue.component('b-com',BCom);缺点就是需要频繁的手动引入手动注册，重
张大栗子·2023-11-23 19:54

Vue3+vite使用scss全局变量

Vue3+vite使用scss全局变量踩坑首先需要下载依赖(vue3直接使用sass，不需要再用node-sass)npminstallsasssass-loader-D然后使用scss全局变量需要在vite.config.js
七月 安生·2023-11-22 15:12

【vite】启动项目时报错：Cannot find module ‘worker_threads‘

启动新clone的vue3+vite项目时报如下错误：Cannotfindmodule‘worker_threads’Error:Cannotfindmodule'worker_threads'atFunction.Module
zhaojingj_·2023-11-22 04:33

【BUG】第一次创建vue3+vite项目启动报错Error: Cannot find module ‘worker_threads‘

问题描述第一次创建vue3+vite项目启动报错如下：Error:Cannotfindmodule'worker_threads'atFunction.Module.
零度念者·2023-11-22 03:23

Vue3+Vite实现工程化，插值表达式和v-text以及v-html

1、插值表达式插值表达式最基本的数据绑定形式是文本插值，它使用的是"Mustache"语法，即双大括号{{}}插值表达式是将数据渲染到元素的指定位置的手段之一插值表达式不绝对依赖标签，其位置相对自由插值表达式中支持javascript的运算表达式插值表达式中也支持函数的调用letmsg="hellovue!";lethello=function(){return"helloworld!"};let
丁总学Java·2023-11-20 09:17

Vue3+Vite实现工程化，ref初次接触响应式和setup语法糖

1、App.vue/*functionsetup(){letnum=9;}*///vue2中所有的变量都是响应式的，但是vue3中默认所有的变量都不是响应式import{ref}from"vue";/*exportdefault{setup(){letnum=ref(9);letincre=function(){num.value++;};letdecre=function(){num.value
丁总学Java·2023-11-20 09:47

Vue3+Vite实现工程化，attribute属性渲染v-bind指令

想要渲染一个元素的attribute，应该使用v-bind指令由于插值表达式不能直接放在标签的属性中，所有要渲染元素的属性就应该使用v-bindv-bind可以用于渲染任何元素的属性，语法为v-bind:属性名='数据名'，可以简写为:属性名='数据名'import{ref}from"vue";letstr="hello2024";letmyType=ref("checkbox")constdat
丁总学Java·2023-11-20 09:47

Vue3+Vite实现工程化，响应式基础

letcounter=0;functionshow(){alert(counter)}-{{counter}}+显示counter值
丁总学Java·2023-11-20 09:47

Vue3+Vite实现工程化，事件绑定以及修饰符

我们可以使用v-on来监听DOM事件，并在事件触发时执行对应的Vue的Javascript代码。用法：v-on:click="handler"或简写为@click="handler"vue中的事件名=原生事件名去掉on前缀如:onClick-->clickhandler的值可以是方法事件处理器，也可以是内联事件处理器绑定事件时，可以通过一些绑定的修饰符，常见的事件修饰符如下@click.once:
丁总学Java·2023-11-20 08:41

vue3+vite中再也不用单独页面引入vue了，神器：unplugin-vue-components/vite

前言：你是否还在为vue3项目中每个组件都需要单独引入vue而烦恼着，实际vite有一个插件能很好的解决这个问题，那就是unplugin-auto-import/vite使用步骤：1、安装npm/cnpm/pnpm/yarn都可以，装上下面两个插件unplugin-auto-import/vite2、vite.config.js中配置importAutoImportfrom'unplugin-au
浩星·2023-11-19 00:46

vue3+vite+ts 发布自定义组件到npm

vue3+vite发布自定义组件到npm初始化项目编写组件配置打包组件上传到npm测试组件库初始化项目//创建项目pnpmcreatevitevue-test-app--templatevue-ts//
FenceRain·2023-11-18 17:09

vue3+vite中配置路径别名@

1、在项目中安装依赖包安装@types/node这个配置地址时会用到npminstall@types/node--save-dev2、修改vite.config.ts配置路径别名@import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom"path";//这个path用到了上面安装的@types/nod
一室易安·2023-11-17 08:16

vue3+vite配置路径别名@

配置路径别名1.安装yarnadd@types/node-D2.修改vite.config.tsimport{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importpathfrom"path";//这个path用到了上面安装的@types/node//https://vitejs.dev/config/exportdefau
码农键盘上的梦·2023-11-17 08:42

这是一份保姆级Vue3+Vite实战教程

写在前面注：本文首发掘金签约专栏，此为文章同步！很长时间没有更新文章了，由于这次签约专栏不能和之前的专栏重复，外加最近又有很多小伙伴问我Vue3在实战中的注意事项和技巧，我想了想，决定写一个Vue3实战专栏，我理解的项目实战，就是大家在看到这篇文章的时候，我刚创建好项目，然后目前码字的我就是在一边写项目一边写文章。在刚刚开始接触前端的时候就一直想写一个工具大全的网站，一直没闲下来写，正好凑着这个机
isboyjc·2023-11-16 22:25

vue3+vite的项目报错 await import(‘source-map-support‘).then((r) =＞ r.default.install()) ^^^^^Synta

awaitimport('source-map-support').then((r)=>r.default.install())^^^^^SyntaxError:Unexpectedreservedword查看一下node版本报错原因是node版本的问题。要使用16之上的版本我的电脑安装了nvm可以查看目前已有的node版本。不会安装nvm的参考这个
夏天想·2023-11-16 10:38

docker+jenkins 容器化,自动化部署vue3+vite前端项目

docker+jenkins容器化,自动化部署vue3+vite前端项目1.docker文档Overview|DockerDocumentation2.基本命令1.dockerimages//查看docker
第七个夏天没有名字·2023-11-15 09:49

vue3+vite批量引入图片文件

vue3支持批量引入某个文件夹下的所有资源，不用通过importXXXfrom'/路径'的这种方式去一张张引入//eager:true表示静态资源//'/public/imgs'路径下letimageList=import.meta.glob('/public/imgs/*.*',{eager:true})console.log(Object.values(imageList).map(v=>v.
派小鑫·2023-11-14 15:07

vue3+vite+windicss+element-plus+axios+router+cookies 搭建

一、vue3+vite+windicss+element-plus+axios+router安装及使用方法参考下面的视频：课时1.课程介绍_哔哩哔哩_bilibili课时1.课程介绍是Vue3+Vite
找到快乐的根源·2023-11-12 22:35

vue3+vite搭建后台项目-1 引入element-plus 中文包,打包时报错问题

vue3+vite搭建后台项目-1引入element-plus中文包,打包时报错问题终端报错Ifthe'element-plus'packageactuallyexposesthismodule,tryaddinganewdeclaration
Gik99·2023-11-11 21:44

vue3+vite搭建后台项目-2项目 src 别名的配置

src别名的配置在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名1.找到//vite.config.ts文件mport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'exportdefaultdefineConfig({plugins:[vue()],//添加以
Gik99·2023-11-11 21:44

vue3+vite搭建后台项目-3 使用自定义插件批量注册全局组件

使用自定义插件批量注册全局组件1.在components文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件//引入组件importSvgIconfrom'./SvgIcon/index.vue'importtype{App,Component}from'vue'constcomponents:{[name:string]:Component}={SvgIc
Gik99·2023-11-11 21:38

vue3+vite打包自动生成dist.zip压缩包（输出后的包名可改变）

先写个生成zip的功能。新建一个zip.js文件，放在和vite.config.js同一级,需先安装插件jszip：npmijszip-D：//zip.js打包自动生成zip包，需npmijszip-Dconstplugin=function(fileName='equipMonitorDist',output){constpath=require('path');if(!output)outpu
web老张头·2023-11-10 15:48

安装配置vue3+vite

一、安装1.确保你已经安装了Node.js。访问https://nodejs.org/以获取最新版本的Node.js，推荐安装LTS版本。2.打开命令行或终端，运行以下命令来全局安装Vite：cnpminstall-gcreate-vite3.创建一个新项目。在命令行中运行以下命令，将"my-vue3-vite-project"替换为你想要的项目名称：create-vitemy-vue3-vite
懒员员·2023-11-08 18:23

vue 动态路由 axios 访问路径变化

在编写vue3+vite项目时，使用动态路由访问axios请求路径发生错误，会额外加一个我们的动态路由路径进来，这不是我们想要的结果，问题如下：vite.config.jsserver:{proxy:{
Chaoerlie·2023-11-06 18:25
上一页 1 2 3 4 5 6 7 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他