Vue3+Vite 项目常见陷阱及解决方案

在使用 Vue3 + Vite 项目开发过程中，我们可能会遇到各种各样的陷阱。这些陷阱涵盖了各种方面，包括浏览器兼容性、模块化加载、组件通信、状态管理以及构建配置等。本文总结了其中一些常见的陷阱，并提供了相应的解决方案。

1. 针对部分浏览器不支持原生 esModule 语法的降级处理

使用插件 @vitejs/plugin-legacy。

// vite.config.js
import legacy from '@vitejs/plugin-legacy';

export default {
  plugins: [legacy({
    targets: ['ie 11'],
    additionalLegacyPolyfills: ['regenerator-runtime/runtime']
  })]
}

2. 按需引入组件导致 tree shaking 失效

使用按需引入组件时，如果组件使用了异步加载，tree shaking 就可能失效。为了解决这个问题，我们可以使用 import.meta.globEager 方法来同步加载组件。

// App.vue
const components = import.meta.globEager('./components/*.vue')

export default {
  components
}

3. 状态管理工具的使用

在 Vue3 项目中，我们可以使用 Pinia 作为状态管理工具。Pinia 是一个轻量级的状态管理库，它提供了与 Vue3 完美集成的 API。

// store/index.js
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

4. 构建配置的优化

在生产环境下，我们需要对构建配置进行优化，以提高构建速度和减少构建后的体积。我们可以使用 terser 插件来压缩 JavaScript 代码，并使用 cssnano 插件来压缩 CSS 代码。

// vite.config.js
export default {
  build: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    cssCodeSplit: false,
    chunkSizeWarningLimit: 1000
  }
}

5. 服务端渲染（SSR）的实现

在 Vue3 项目中，我们可以使用 VitePress 来实现服务端渲染。VitePress 是一个基于 Vite 的静态站点生成器，它提供了开箱即用的 SSR 支持。

// vitepress.config.js
export default {
  ssr: {
    noExternal: ['vue']
  }
}

希望本文能够帮助大家在使用 Vue3 + Vite 项目开发过程中避免或解决遇到的问题，从而提高开发效率和项目质量。