vite打包配置

目录


minify默认是esbuild,不能启动下面配置

使用:

javascript 复制代码
plugins: [
    viteMockServe({
      mockPath: 'mock'
    })
  ]

根目录新建mock/index.ts. 有例子Mock file examples:https://www.npmjs.com/package/vite-plugin-mock-server

开发环境生产环境地址替换。根目录下新建两个文件.env.development和.env.production

使用element-plus组件,兼容vue3:

复制代码
   https://blog.csdn.net/qq_51137480/article/details/132513904

全局引入体积过大,官方提供按需引入插件unplugin-vue-components 和 unplugin-auto-import这两款插件,main.ts就不需要引入了

CDN引入:

注意package.json也需要下载包

javascript 复制代码
npm install vite-plugin-cdn-import --save-dev

新版本使用:

javascript 复制代码
import { Plugin as 名称} from 'vite-plugin-cdn-import'

旧版使用:

javascript 复制代码
import 名称 from 'vite-plugin-cdn-import'

打包图片:

javascript 复制代码
 npm i vite-plugin-imagemin -D
javascript 复制代码
  viteImagemin({
     gifsicle: {
       optimizationLevel: 7,
       interlaced: false
     },
     optipng: {
       optimizationLevel: 7
     },
     mozjpeg: {
       quality: 20
     },
     pngquant: {
       quality: [0.8, 0.9],
       speed: 4
     },
     svgo: {
       plugins: [
         {
           name: 'removeViewBox'
         },
         {
           name: 'removeEmptyAttrs',
           active: false
         }
       ]
     }
   })

代码压缩:

javascript 复制代码
npm i vite-plugin-compression -D
javascript 复制代码
viteCompression({
	//生成压缩包gz
	verbose:true,
	disable:false,
	threshold:10240,
	algorithm:'gzip',
	ext:'.gz'
})

格式化

javascript 复制代码
npm eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-prettier eslint-plugin-vue -D

共享配置:

项目.vscode下面extensions.json下面。把需要推荐的搜索放进去

javascript 复制代码
{
  "recommendations": ["Vue.volar"]
}

例如搜索安装mongo,点击扩展名打开一个链接https://marketplace.visualstudio.com/items?itemName=JoeyYiZhao.mongo-runner,把itemName后面放进去

javascript 复制代码
{
  "recommendations": ["Vue.volar","JoeyYiZhao.mongo-runner"]
}

最后:一般新下项目直接点击 拓展里面的筛选-推荐

如果有需要在.vscode下面新建setting.json和项目本地差不多,拷贝过来有需要什么改的可以改,放进项目的好处,其他下载项目的可以直接使用这个配置。之前遇到项目做echats地图需要配置的每个开发都要设置一遍,有了这个就不需要本地配置了

相关推荐
吃饭最爱1 天前
⽹络请求Axios的概念和作用
vue
魂尾ac1 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52142 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦3 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君3 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手3 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO4 天前
分类别柱状图(Vue3)
typescript·vue·echarts
大虾写代码4 天前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint