vite打包配置vue3+ts

vite.config.ts 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { visualizer } from 'rollup-plugin-visualizer'
import importToCDN from 'vite-plugin-cdn-import'
import viteCompression from 'vite-plugin-compression'
import { resolve } from "path"

console.log(importToCDN);

export default defineConfig({
  // base: '/test/7625',
  // 强制预构建插件包,如果加载了一些浏览器不支持的语法,需要进行预编译
  optimizeDeps: {
    include: ['axios'],
    // exclude: []
  },
  plugins: [
    vue(),
    viteCompression(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    visualizer({ open: true }),
    (importToCDN as any).default({
      modules: [
        {
          name: "vue",
          var: "Vue",
          path: "https://cdn.staticfile.org/vue/3.3.4/vue.runtime.global.prod.min.js"
        },
        {
          name: 'vue-demi',//安装vue-demi并导入 因为pinia中有用vue依赖中的vue-demi
          var: 'VueDemi',
          path: "https://cdn.staticfile.org/vue-demi/0.14.6/index.iife.min.js"
        },
        {
          name: "vue-router",
          var: "VueRouter",
          path: "https://cdn.staticfile.org/vue-router/4.2.4/vue-router.global.prod.min.js"
        },
        {
          name: "element-plus",
          var: "ElementPlus",
          path: "https://cdn.staticfile.org/element-plus/2.4.4/index.full.min.js",
          css: "https://cdn.staticfile.org/element-plus/2.4.4/index.min.css"
        },
        {
          name: "echarts",
          var: "echarts",
          path: "https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"
        },
        // {
        //   name:"crypto-js",
        //   var:"cryptojs",
        //   path:[
        //     "https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js",
        //     "https://cdn.staticfile.org/crypto-js/4.1.1/x64-core.min.js",
        //     "https://cdn.staticfile.org/crypto-js/4.1.1/core.min.js",
        //     "https://cdn.staticfile.org/crypto-js/4.1.1/aes.min.js",
        //   ]
        // },
      ]
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  // 打包配置
  build: {
    target: ['es2015', 'edge88', 'firefox78', 'chrome87', 'safari14'],
    outDir: 'dist', //指定输出路径
    assetsDir: 'public/assets', // 指定生成静态资源的存放路径
    // assetsDir: 'assets', // 指定生成静态资源的存放路径
    minify: 'terser', // 混淆器，terser构建后文件体积更小
    terserOptions: {
      compress: {
        drop_console: true, //打包时删除console
        drop_debugger: true, //打包时删除debugger
        pure_funcs: ['console.log'],
      },
      output: {
        //去掉注释内容
        comments: true,
      },
    },
  },

  // 本地运行配置，及反向代理配置
  server: {
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      '/api': {
        target: 'http://localhost:3000', // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true,  // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, '') // 将api替换为空
      }
    }
  }
})