vite项目构建速记

常规配置

• 设置环境变量 .env等文件
• css模块化配置(css和scss less等,一般默认),配置postcss: npm i postcss-cli postcss -D postcss预设:npm i postcss-preset-env -D
• 路径配置 如最常见的@路径
• 配置代理
• 打包配置(build)

tsconfig.json相关

• 配置模块解析方案:moduleResolution": "Node",
• 跳过第三方库语法校验:"skipLibCheck": true,
• 排除node_modules文件夹检索:"exclude": ["node_modules/**"],

常规配置附加

• 配置解析.vue后缀文件
• 配置在.vue解析.ts文件

常用插件

• vite-aliases 别名自动装配
• AutoImport 自动导入依赖
• vite-plugin-html 压缩html,方便相关配置 npm i vite-plugin-html -D
• vite-plugin-mock 模拟数据
• vite-plugin-checker 代码规范化校验 (记得排除node_modules内部文件纠错)
• electronRender 附加:集成electron时用到

生产环境性能优化

分包策略

---把一些不会更新的文件,进行单独打包处理

gzip压缩

---将所有的静态文件进行压缩,达到减小体积的目的 vite-plugin-compression

动态导入

---使用import()进行异步加载

CDN加速

---vite-plugin-cdn-import

浅记-vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron';
import path from 'path'
import electronRender from 'vite-plugin-electron-renderer'
import AutoImport from "unplugin-auto-import/vite";
import postcssPresetEnv from 'postcss-preset-env'
import { createHtmlPlugin } from 'vite-plugin-html'
import cheker from 'vite-plugin-checker'
import viteCompression from 'vite-plugin-compression';
import importToCDN from 'vite-plugin-cdn-import'

export default ({ mode }: any) => {
  const env = loadEnv(mode, process.cwd())
  return defineConfig({
    plugins: [
      vue(),
      electron({
        main: {
          entry: "_electron_/index.ts"
        }
      }),
      electronRender(),
      AutoImport({
        // 自动导入vue相关的Api
        imports: ["vue", "vue-router"],   // 也支持vue-router、axios等
        // 声明文件的存放位置
        dts: 'auto-imports.d.ts'
      }),
      createHtmlPlugin({
        minify: true,
        /**
         * 在这里写entry后，不需要在`index.html`内添加 script 标签，原有标签需要删除
         * @default src/main.ts
         */
        entry: 'src/main.ts',
        /**
         *  `index.html`指定文件夹
         * @default index.html
         */
        template: 'index.html',
        /**
         * 需要注入 index.html ejs 模版的数据
         */
        inject: {
          data: {
            title: env.VITE_TITLE,
          },
        },
      }),
      cheker({//代码规范化校验
        typescript: true
      }),
      viteCompression(),//gzip压缩
      importToCDN({//CDN加速
        modules: [],
      })
    ],
    resolve: {
      alias: {
        // 别名的键值对
        '@': path.join(__dirname, 'src'),
        '@ts': path.join(__dirname, 'src/assets/ts'),
      },
      extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/assets/variables.scss";`//全局css变量
        },
        devSourcemap: true,//css文件定位相关
        postcss: {
          plugins: [
            postcssPresetEnv()//预设:语法降级 前缀补齐 等
          ]
        }
      }
    },
    define: {
      'process.env': {//配置环境变量  process.env.获取
        WEBSKT_HOST_PORT: 'ws://127.0.0.1:8085'
      }
    },
    server: {
      host: '0.0.0.0',
      port: 998,
      proxy: {
        // 接口地址代理
        [env.VITE_BASE_API]: {
          target: 'http://127.0.0.1:8083',
          secure: false, // 如果是https接口，需要配置这个参数
          changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
          rewrite: path => path.replace(new RegExp(env.VITE_BASE_API, 'g'), '')
        },
      }
    },
    build: {
      rollupOptions: {
        output: {
          assetFileNames(chunkInfo) {//静态资源 -----------配置输出文件夹结构
            if (chunkInfo.name) {
              const [name, ext] = path.basename(chunkInfo.name).split('.')
              return `static/assets/${ext}/${name.toLocaleLowerCase()}-[hash].${ext}`
            }
            return ''
          },
          chunkFileNames: 'static/chunk-js/[name]-[hash].js',//块文件
          entryFileNames: 'static/[name]-[hash].js',//入口文件
          manualChunks: (id) => {
            if (id.includes('node_modules')) {//分包策略
              return 'vendor';
            }
          }
        }
      },
      chunkSizeWarningLimit: 1500,//掩耳盗铃-设置打包后文件大小告警阈值
      assetsInlineLimit: 4096000,// 4000kb  超过会以base64字符串显示
      outDir: "dist",//文件输出目录,默认是dist
      assetsDir: "static",//静态资源目录
      cssCodeSplit: true, // 启用 CSS 代码拆分
      emptyOutDir: true, // 构建时清空该目录
      minify: 'terser', // 必须启用：terserOptions配置才会有效
      terserOptions: {
        compress: {
          // 生产环境时移除console.log调试代码
          drop_console: true,
          drop_debugger: true,
        }
      }
    }
  })
}