基于 webpack 项目接入 vite 你可能需要注意的点

2023-11-01 13:54:31

从 Webpack 过渡到 Vite：终极指南

简介

随着前端开发生态的不断发展，Vite 凭借其开箱即用的开发环境、极快的启动和热重载速度，吸引了越来越多的开发者的关注。对于使用 Webpack 构建的现有项目，过渡到 Vite 可以带来显著的开发体验提升。本文将深入探讨如何将 Webpack 项目接入 Vite，并介绍需要注意的事项以及兼容性问题。

安装 Vite

首先，我们需要在项目中安装 Vite：

npm install --save-dev vite

配置 Vite

接下来，在项目根目录创建一个名为 vite.config.js 的文件，并添加以下配置：

// vite.config.js
export default {
  // vite 构建目标目录
  build: {
    outDir: 'dist', // 构建后文件产出目录
    // 选择构建时使用的模式，具体模式的含义参考文档
    target: 'es2015',
    // 开启构建时代码压缩
    minify: 'esbuild',
    // 配置构建后的代码需要被注入的环境变量
    define: {
      __VUE_OPTIONS_API__: true, // 是否启用 Composition API
      __VUE_PROD_DEVTOOLS__: false, // 生产环境是否启用 devtools
    },
    rollupOptions: {
      // 配置代码分割，按需加载
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          common: ['element-plus'],
        },
      },
    },
  },
  // vite 开发服务器的配置
  server: {
    // 指定项目根目录
    root: 'public',
    // 指定端口号，不指定则随机分配端口
    port: 3000,
    // 开启热更新
    hmr: true,
    // 是否开启https服务
    https: false,
    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  // 插件的配置
  plugins: [
    // @vitejs/plugin-vue 支持 Vue 3
    vue(),
  ],
  // 别名配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
};

修改项目入口文件

修改项目的入口文件 index.html，将 <script> 标签中的 src 属性值改为 main.js。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="app"></div>
  <script type="module" src="main.js"></script>
</body>
</html>