vite打包配置

最新推荐文章于 2024-07-04 02:26:06 发布

小胡歌i

最新推荐文章于 2024-07-04 02:26:06 发布

阅读量494

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_55737212/article/details/137176859

版权

本文详细解读了Vite和Rollup配置文件中的关键部分，包括插件管理、目录路径、全局样式、开发服务器设置、API代理以及打包构建选项，展示了如何优化项目结构和性能。

摘要由CSDN通过智能技术生成

export default defineConfig({
  // 与插件有关的操作，如自动导入
  plugins: [
    visualizer({ open: true }),
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 配置目录路径相关操作，如下@的配置
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 对全局样式进行相关修改，操作相关操作
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/assets/styles/variables.scss" as *;'
      }
    }
  },
  // 开发服务器选项，配置跨区代理api、端口等操作
  server: {
    host: "0.0.0.0",
    port: 3001, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    //配置代理
    proxy: {
      '/api': {
        target: '*****',  // 请求地址
        changeOrigin: true,  // 是否将发送请求host设置为当前的host
        rewrite: (path) => path.replace(/^\/api/, 'api'),
      }
    }
  },
  // 打包构建相关操作
  build: {
    // 配置rollup打包项
    rollupOptions: {
      output: {
        // 入口文件
        // 自己写的js文件
        entryFileNames: `js/[name]-[hash].js`,
        // 引入的相关js、ts文件，比如分包之后的js
        chunkFileNames: `js/[name]-[hash].js`,
        // 写法1
        // [ext] 根据不同的后缀名进行分类
        // assetFileNames: `[ext]/[name]-[hash]`

        // 写法2
        // 函数的形式，可对文件进行相关操作
        assetFileNames: (assetInfo: any) => {

          if (assetInfo.name.endsWith(".css")) {
            return `css/[name]-[hash].css`
          }
          const imgType = ['.png', 'jpg', '.bmp', '.webp', '.svg', 'gif']
          if (imgType.some(ext => assetInfo.name.endsWith(ext))) {
            return `images/[name]-[hash].[ext]`
          }
          return `assets/[name]-[hash].[ext]`
        },
        // 对打包进行处理，项目中会用到相关的库，而打包变动时，
        // 这些库不需要变化，要变的只是我们修改的业务相关的js
        // 所以此操作对不需要变更的库进行统一处理，修改逻辑之后也不会再次进行打包
        manualChunks: (id) => {
          if (id.includes("node_modules")) {
            return `vender`
          }

        }
      },
    }
  },
})

vite官网：构建选项 | Vite 官方中文文档

rollup官网：配置选项 | rollup.js 中文文档 | rollup.js中文网