首页 > 其他分享 >vite打包分包vue3

vite打包分包vue3

时间:2024-03-18 11:15:24浏览次数:32  
标签:hash name facadeModuleId js 分包 vue3 vite split

// https://vitejs.dev/config/
// vite.config.js
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
   server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://192.168.1.4:8089', // 接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  // 分包配置
  build: {
    chunkSizeWarningLimit: 1500,
    outDir: 'dist/scoutweb',
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString();
          }
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        //   chunkFileNames: 'js/[name].[hash].js',
        // 用于输出静态资源的命名,[ext]表示文件扩展名
        assetFileNames: '[ext]/[name].[hash].[ext]',
        // 拆分js到模块文件夹
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId
            ? chunkInfo.facadeModuleId.split('/')
            : [];
          const fileName =
            facadeModuleId[facadeModuleId.length - 2] || '[name]';
          return `js/${fileName}/[name].[hash].js`;
        }
      }
    }
  }
});


标签:hash,name,facadeModuleId,js,分包,vue3,vite,split
From: https://www.cnblogs.com/lifan-fineDay/p/18079910

相关文章

  • Vue3学习日记 Day4
    注:此课程需要有Git的基础才能学习一、pnpm包管理工具1、使用原因  1.1、速度快,远胜过yarn和npm  1.2、节省磁盘空间 2、使用方式  2.1、安装方式    npminstall-gpnpm  2.2、创建项目    pnpmcreatevue   二、Eslint......
  • Vue3学习日记 Day3 —— Pinia的介绍及使用
    一、Pinia1、介绍 1、介绍 Pinia是Vue最新的状态管理工具,是Vuex的替代品 2、变化 2.1、去掉了modules和mutation,每一个store都是一个独立的模块 2.2、actions即可提供异步,又可提供同步,且可直接修改state数据 2.3、提供更加符合、组合式风格的API ......
  • Vue3之Composables
    前言Composables 称之为可组合项,熟悉 react 的同学喜欢称之为 hooks ,由于可组合项的存在,Vue3 中的组件之间共享状态比以往任何时候都更容易。这种新范例引入了一种更有组织性和可扩展性的方式来管理整个应用程序的状态和逻辑。什么是Composables本质上,可组合项是一种模式......
  • vue3+ts+vant写移动端项目部Android机页面打开空白
    前言部分安卓机因为内置webview较老,所以无法识别最新的es6的语法,页面打开空白。解决方式,vite项目就使用@vitejs/plugin-legacy,其他项目可以选择使用@babel/core@babel/cli@babel/preset-env这里主要提vite项目,因为babel项目的相关博客较多,就不再复述。 vite.config......
  • Vue — Vue3.0快速掌握
    一.使用create-vue创建项目1.环境条件node版本在16.0以上2.创建vue3.0应用npminitvue@latest//创建npminstall//下载依赖3.项目目录和关键文件1.vite.config.js:项目的配置文件基于vite的配置2.package.接送:项目包文件核心依赖变成了Vue3.X和vite3.main.js:入......
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文
    全套笔记资料代码移步:前往gitee仓库查看感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~全套教程部分目录:部分文件图片:认识Vue31.Vue3组合式API体验通过Counter案例体验Vue3新引入的组合式API<script>exportdefault{data(){return{count:0......
  • Vue3 组件通信方式小结
    也是零零散散用vue3来搞一些前端的页面,每次在组件通信,主要是传数据这块总是忘记,大多无非父传子,子传父等情况,这里再来做一个小结.父传子Props最常见的就是父组件给子组件传递数据,不论是传字符串也好,还是数组,对象,函数等,都可以通过属性传值的方式,子组件......
  • Vue3学习日记 Day1
    一、简介1、简介  Vue3是新的默认版本,拥有更快的速度,更好的语法二、使用create-vue搭建Vue3项目1、创建项目1、介绍  create-vue是Vue官方新的脚手架工具,底层切换为了vite,为开发提供极速响应2、使用  2.1、确定环境条件    2.1.1已安装16.0或......
  • 第一个Vue3程序
     上一个作品是Vue2的代码,这个是Vue3,引入时候不一样<!DOCTYPEhtml><html><head><title>Vue.js示例</title><!--引入Vue.js--><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>......
  • Vue3-03_组件基础_上
    单页面应用程序什么是单页面应用程序单页面应用程序(英文名:SinglePageApplication)简称SPA,顾名思义,指的是一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序的特点单页面应用程序将所有的功能局限于一个web页面中,仅在......