引言

在前端开发领域，多页面应用（MPA，Multi-Page Application）的需求依然广泛存在，尤其是在企业级项目中。传统的Webpack配置虽然强大，但面对日益增长的项目规模，其配置复杂度和构建速度逐渐成为瓶颈。近年来，Vite凭借其快速的热更新和简洁的配置，赢得了广大开发者的心。当Vite遇上Vue3，构建多页面应用不仅变得简单高效，而且在环境变量管理方面也更加灵活。本文将带你深入了解如何在Vite + Vue3的环境下，优雅地配置多页面应用，并掌握references和loadEnv的使用技巧。

Vite + Vue3 的优势

• 快速启动：得益于ES模块的原生支持，Vite能在开发模式下瞬间启动，无需等待漫长的编译时间。
• 热模块替换：HMR（Hot Module Replacement）使得代码修改后自动更新，极大地提升了开发效率。
• 简洁配置：Vite采用了基于JavaScript的配置文件，与Webpack的复杂JSON配置相比，更加直观易懂。

多页面应用配置

在Vite中，要实现多页面应用，关键在于配置build.rollupOptions.input。这个选项告诉Vite哪些文件应该被视为入口点，每个入口点都会被构建为一个独立的页面。

// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: {
        main: './src/main.js', // 主页面入口
        about: './src/about.js' // 关于页面入口
      }
    }
  }
};

环境变量管理

Vite通过.env文件系列来管理环境变量，这些变量会自动注入到全局对象import.meta.env中。对于多页面应用，可以利用loadEnv函数来按需加载不同的环境变量。

// vite.config.js
import { loadEnv } from 'vite'

const mode = process.env.NODE_ENV
const env = loadEnv(mode, process.cwd())

export default {
  envPrefix: ['VITE_', 'VUE_'],
  plugins: [
    vue(),
    // ...其他插件
  ],
  server: {
    host: env.VITE_HOST,
    port: env.VITE_PORT
  },
  // ...其他配置
}

references：引入外部资源

在多页面应用中，有时需要共享某些公共的组件或样式。Vite允许我们在vite.config.js中定义references，这样就能在所有页面中引用相同的资源，避免重复加载。

// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: {
        main: './src/main.js',
        about: './src/about.js'
      },
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    assetsDir: 'static',
    assetsInlineLimit: 4096,
    chunkSizeWarningLimit: 1500,
    commonjsOptions: {},
    cssCodeSplit: true,
    emptyOutDir: true,
    lib: {},
    manifest: false,
    minify: undefined,
    outDir: 'dist',
    rollupOptions: {
      external: ['vue'],
      input: {},
      output: {
        assetFileNames: 'assets/[name]-[hash].[ext]',
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        exports: 'auto',
        format: 'es',
        manualChunks: undefined,
        name: 'myLib',
        plugins: [],
        sourcemap: false,
        strict: false,
        treeshake: {}
      },
      plugins: [],
      preserveEntrySignatures: 'exports-only',
      treeshake: true
    },
    sourcemap: false,
    target: 'esnext',
    terserOptions: {},
    watch: {}
  },
  define: {},
  logLevel: 'info',
  optimizeDeps: {
    esbuildOptions: {},
    exclude: [],
    include: [],
    onwarn: undefined,
    preserveSymlinks: false,
    tsConfigPath: undefined
  },
  plugins: [],
  publicDir: 'public',
  resolve: {
    alias: {},
    conditions: [],
    dedupe: [],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    mainFields: ['browser', 'module', 'main'],
    preferRelative: false
  },
  root: '.',
  server: {
    allowedHosts: 'auto',
    cors: undefined,
    fs: {},
    hmr: {},
    host: undefined,
    middlewareMode: false,
    open: undefined,
    port: 5173,
    proxy: {},
    strictPort: false,
    https: false,
    origin: undefined
  },
  test: {},
  userConfigPath: 'vite.config.js',
  customConfigFiles: [],
  command: '',
  mode: ''
};

上述配置中的rollupOptions部分尤其重要，它控制着如何打包和输出资源，从而影响最终的性能和用户体验。

总结

Vite + Vue3的组合为多页面应用的构建提供了前所未有的灵活性和效率。通过合理的配置，我们不仅可以简化开发流程，还能有效管理环境变量，确保不同环境下的应用表现一致。掌握这些配置技巧，将使你在项目开发中游刃有余，提升开发效率，降低维护成本。

通过本篇文章的介绍，你应当对如何在Vite + Vue3环境下优雅地构建多页面应用有了全面的了解。接下来，不妨动手实践，将这些知识应用到自己的项目中，体验高效开发的乐趣吧！