Vue3.X新建一个基于vite+typescript的项目

引言

在项目中使用vue3+vite+ts技术栈，改如何快速安装呢，接下来我就来介绍一下在vue3快速使用vite+ts的方法。

# npm 6.x 
npm init vite fe-architecture --template vue-ts

# npm 7+ (需要额外的双横线) 
npm init vite fe-architecture -- --template vue-ts

初始化

安装完需要初始化

• 使用npm i 安装依赖
• 配置vite路径

// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  }
})

• 打包时生成.gz和.br压缩包

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
    plugins: [
        vue(),
        // 开启gzip压缩
        viteCompression({
          verbose: true,
          disable: false,
          threshold: 10240,
          algorithm: 'gzip',
          ext: '.gz'
        }),
        // 开启brotli压缩
        viteCompression({
          verbose: true,
          disable: false,
          threshold: 10240,
          algorithm: 'brotliCompress',
          ext: '.br'
        })
    ]
})