vite 在vue3.0里的基础配置

1. vite.config.js中的基本配置

import { join } from 'path'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader'; //解析svg
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'; //内置了对一些流行UI库的解析器，例如Vuetify、Ant Design Vue和Element Plus
import Components from 'unplugin-vue-components/vite';//自动将项目中使用的 Vue 组件按需引入
import AutoImport from 'unplugin-auto-import/vite'; //自动导入组件
import viteCompression from 'vite-plugin-compression'// 开启 gzip 打包 压缩
import { visualizer} from 'rollup-plugin-visualizer' //查看项目的依赖
import {createHtmlPlugin} from 'vite-plugin-html' //CDN加载
import externalGlobals from 'rollup-plugin-external-globals'//CDN加载

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    svgLoader(),
     AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      
    }),
     //查看项目的依赖
    visualizer({
      open: true
    }),
    // 将下面的添加到plugin下
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          vuescript: '<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>',
          elementPlusScript: `
            <link href="https://cdn.jsdelivr.net/npm/element-plus@2.2.22/dist/index.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/element-plus@2.2.22/dist/index.full.min.js"></script>`,
          cryptoJs: '<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/index.min.js"></script>'
        }
      }
    }),
    Components({
      resolvers: [VuetifyResolver()],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    }),
  ],
 
    build: {
      assetsInlineLimit:4096,//小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 `0` 可以完全禁用此项。
      minify: 'terser',
      //  告诉打包工具 在external配置的 都是外部依赖项  不需要打包
    external: ['vue', 'element-plus', 'crypto-js'],
    plugins: [
      externalGlobals({
        vue: 'Vue',
        'element-plus': 'ElementPlus',
        'crypto-js': 'CryptoJS'
      }),
      viteCompression({
        threshold: 1024000 // 对大于 1mb 的文件进行压缩
      }),
    ],
    // rollup 配置
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js', // 引入文件名的名称
        entryFileNames: 'static/js/[name]-[hash].js', // 包的入口文件名称
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
        manualChunks(id) {
          // 如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中，减少http请求，如果不同模块使用不同插件明显，那就分成不同模块打包。这是一个矛盾体。
          // 这里使用的是最小化拆分包。如果是前者可以直接选择返回'vendor'。
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString(); //让打开那个页面，加载那个页面的js ，让之间的关联足够小
            // return 'vendor'   如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中，减少http请求;
          }
        }
      }
    },
      terserOptions: {
          compress: {
              //生产环境时移除console
              drop_console: true,
              drop_debugger: true,
          },
      },
  },
  resolve: {
    alias: {
      '@': join(__dirname, 'src'),
    }
  },
  server: {
    host: true,
    port: 1798,
    proxy: {
      // '/api': {
      //   target: 'https://vue3.go-admin.dev',
      //   changeOrigin: true,             //开启跨域
      //   rewrite: (path) => path.replace(/^\/api/, '')
      // },
      '/admin': {
        target: 'http://dev.hospital.admin.igandanyiyuan.com',
        changeOrigin: true,             //开启跨域
        rewrite: (path) => path.replace(/^\/admin/, '')
      }
    }
  },
  // 引入全局scss变量
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/style/variables.scss";`
      }
    }
  },
  publicDir: '/public'
});

2. package.json中的基本配置

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "reset-css": "^5.0.2",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@types/node": "^20.4.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "rollup-plugin-external-globals": "^0.8.0",
    "rollup-plugin-visualizer": "^5.9.2",
    "terser": "^5.19.1",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.4.5",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "^3.2.0"
  }
}