1.配置CDN

安装插件：pnpm i rollup-plugin-external-globals

  1. //pudding\packages\pudding-front-one\vite.config.ts
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import { visualizer } from 'rollup-plugin-visualizer'
  5. import externalGlobals from 'rollup-plugin-external-globals'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.     visualizer({
  11.       open: true// 打包完成后自动打开浏览器，显示产物体积报告
  12.     })
  13.   ],
  14.   server: {
  15.     open: true
  16.   },
  17.   build: {
  18.     rollupOptions: {
  19.       external: ['vue'],
  20.       plugins: [
  21.         externalGlobals({
  22.           vue: 'Vue'
  23.         })
  24.       ]
  25.     }
  26.   },
  27. })

html配置引入的CDN，这里是去vue官网拿的> > https://v3.cn.vuejs.org/guide/installation.html#cdn

  1. //pudding\packages\pudding-front-one\index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Vite + Vue + TS</title>
  9.   </head>
  10.   <body>
  11.     <div id="app"></div>
  12.     <script src="https://cdn.jsdelivr.net/npm/vue@3.2.36/dist/vue.runtime.global.prod.js"></script>
  13.     <script type="module" src="/src/main.ts"></script>
  14.   </body>
  15. </html>

改为相对路径，因为想看看打包后有没有问题

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import { visualizer } from 'rollup-plugin-visualizer'
  4. import externalGlobals from 'rollup-plugin-external-globals'
  5. // https://vitejs.dev/config/
  6. export default defineConfig({
  7.   //之前的代码
  8.   base: './' //打包路径变为相对路径，后面上线可能会修改
  9. })

然后可以看到从dist里面打开html也可以看到页面
image.png