vue3+vite 打包走CDN

275 阅读1分钟
pnpm i rollup-plugin-external-globals

index.html
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- import CSS -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- import JavaScript -->
  <script src="//unpkg.com/element-plus"></script>

vite.config.ts
import externalGlobals from 'rollup-plugin-external-globals'


   build: {
      minify: 'terser', // terser esbuild
      outDir: env.VITE_OUT_DIR || 'dist',
      sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false,
      terserOptions: {
        compress: {
          drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
          drop_console: env.VITE_DROP_CONSOLE === 'true'
        }
      },
      rollupOptions: {
        external: ['vue', 'element-plus'],
        plugins: [
            externalGlobals({
                vue: 'Vue',
                'element-plus': 'ElementPlus',
            }),
        ],
        output: {
          // chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
          // entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
          // assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体,图片等
          // manualChunks(id) {
          //   if (id.includes('node_modules')) {
          //     return id.toString().split('node_modules/')[1].split('/')[0].toString();
          //   }
          // }
          // manualChunks(id) {
          //   if (id.includes('node_modules')) {
          //     const dependenciesKeys = Object.keys(dependencies);
          //     const match = dependenciesKeys.find(item => {
          //       return id.includes(item);
          //     });
          //     // return match
          //     const notSplit = ['vue']; // 不拆分+
          //     if (match && !notSplit.includes(match)) {
          //       return match;
          //     }
          //   }
          // }
        }
      }
    },