vue2项目升级到vue3经历分享2

原创

已于 2024-12-31 14:14:45 修改 · 759 阅读

于 2024-04-27 11:44:23 首次发布

升级的代价并不是那么简单，一篇文章vue2项目升级到vue3经历分享1，只好再写一篇。
1 cdn使用
在vue2中cdn使用，在public中放入js，如果cdn失效则取本地的js

在vue.config.js中指定外部cdn资源的分发

在vue3中使用yarn add vite-plugin-cdn-import --dev，然后在vite.config.ts中配置

import cdn from 'vite-plugin-cdn-import'
cdn({
   
   
        modules: [
          {
   
   
            name: "element-plus",
            var: "ElementPlus",
            path: "https://cdn.jsdelivr.net/npm/element-plus@2.2.32/dist/index.full.min.js",
          },
          {
   
   
            name:"echarts", // 按需引入echarts
            var: "echarts",   
            path: "https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js",
          },
          {
   
   
            name: "axios",
            var: "axios",
            path: "https://cdn.jsdelivr.net/npm/axios@1.6.1/dist/axios.min.js",
          },
          {
   
   
            name: 'vue',
            var: 'Vue',
            path: 'https://cdn.jsdelivr.net/npm/vue@3.3.8/dist/vue.global.min.js',
          },
          {
   
   
            name:'vue-router',
            var: 'VueRouter',
            path: 'https://cdn.jsdelivr.net/npm/vue-router@4.2.5/dist/vue-router.global.min.js',
          },
        ],
      }),

执行yarn build:dev后就可以看到打包的效果,即开发环境默认是不启用cdn的

哪些需要引用cdn呢，安装yarn add rollup-plugin-visualizer --save
在vite.config.ts中配置

import {
   
   visualizer} from 'rollup-plugin-visualizer'
visualizer({
   
   
        filename: './bundle-visualizer.html',
        open: true,
        gzipSize: true,
      }),

在执行yarn build之后，就可以看到,哪些文件大，就那个文件使用cdn进行加速

发布到生产环境，并不能总能如愿的顺利，提示下面的错误

aria.ts:22 Uncaught TypeError: Cannot read properties of undefined (reading 'defineComponent')
    at aria.ts:22:19
    at index.full.min.js:1:240
    at index.full.min.js:1:268
(anonymous) @ aria.ts:22
(anonymous) @ index.full.min.js:1
(anonymous) @ index.full.min.js:1
index.min.js:3 Uncaught SyntaxError: Cannot use import statement outside a module (at index.min.js:3<