如何在现有Express多页项目中配置Vue、Webpack及Vuetify？

Hey there! Let's walk through configuring Webpack and Vuetify to refactor your Express/EJS frontend step by step. I'll keep things clear and practical since you're new to Webpack. First, I'll assume your existing project has a standard Express structure like this (adjust if yours differs):

your-project/
├── node_modules/
├── public/
│   ├── css/
│   ├── js/
│   └── images/
├── views/
│   └── *.ejs
├── routes/
│   └── *.js
├── app.js
└── package.json

1. Install Required Dependencies #

First, let's install all the packages we need. Open your terminal and run:

# Dev dependencies (webpack tools, loaders, plugins)
npm install vuetify vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server css-loader style-loader vue-style-loader sass sass-loader fibers html-webpack-plugin webpack-plugin-vuetify --save-dev

# Production dependencies (vue and vuetify core)
npm install vue vuetify

Quick breakdown of key packages:

• vue + vuetify: The core frontend framework and UI library
• webpack + webpack-cli: The bundler itself and its command-line tool
• vue-loader + vue-template-compiler: Handles .vue single-file components
• sass + sass-loader: Vuetify uses Sass for styling, so we need these to process it
• html-webpack-plugin: Generates our frontend entry HTML file
• webpack-plugin-vuetify: Automatically imports Vuetify components/styles to keep bundle size small

2. Restructure Your Project #

We'll add a src/ directory to hold all your new Vue/Vuetify frontend code. Update your structure to look like this:

your-project/
├── src/
│   ├── main.js       # Frontend entry point
│   ├── App.vue       # Root Vue component
│   ├── index.html    # HTML template for Webpack
│   └── components/   # Your custom Vue components (add this later as needed)
├── public/           # Webpack will output bundled files here
├── views/            # Keep temporarily if you need to transition from EJS
├── routes/
├── webpack.config.js # Webpack configuration file (we'll create this next)
├── app.js
└── package.json

3. Configure Webpack (webpack.config.js) #

Create this file in your project root. This is the core config that tells Webpack how to bundle your frontend code:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VuetifyPlugin } = require('webpack-plugin-vuetify');

module.exports = {
  // Entry point for your frontend code
  entry: './src/main.js',
  // Where to output bundled files
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.[contenthash].js', // Content hash for cache busting
    clean: true // Clear old files in public/ before each build
  },
  // Rules for processing different file types
  module: {
    rules: [
      // Handle .vue single-file components
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: { preserveWhitespace: false }
        }
      },
      // Process CSS files
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      // Process Sass/SCSS files (required for Vuetify)
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'), // Makes Sass compilation faster
                indentedSyntax: true // Supports Sass's indent-based syntax
              }
            }
          }
        ]
      },
      // Handle image assets
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset/resource',
        generator: { filename: 'images/[hash][ext][query]' }
      }
    ]
  },
  // Plugins to extend Webpack functionality
  plugins: [
    // Generate our entry HTML file from the template
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    // Auto-import Vuetify components/styles (no need to import everything manually)
    new VuetifyPlugin({ autoImport: true })
  ],
  // Resolve file extensions and aliases for cleaner imports
  resolve: {
    extensions: ['.vue', '.js', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js',
      '@': path.resolve(__dirname, 'src') // Lets you use @/components/MyComponent instead of relative paths
    }
  },
  // Source maps for easier debugging
  devtool: 'source-map',
  // Development server config (hot reloading + proxy to Express API)
  devServer: {
    static: { directory: path.join(__dirname, 'public') },
    hot: true, // Enable hot module replacement
    port: 8080,
    proxy: {
      // Proxy all /api requests to your Express server (running on port 3000)
      '/api': { target: 'http://localhost:3000', changeOrigin: true }
    }
  }
};

4. Write Your Frontend Entry Files #

src/main.js (Initialize Vue + Vuetify) #

This is where we bootstrap our Vue app and integrate Vuetify:

import { createApp } from 'vue'
import App from './App.vue'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// Create Vuetify instance with all components/directives
const vuetify = createVuetify({
  components,
  directives,
  // Add custom theme here if you want (optional)
  // theme: { defaultTheme: 'dark' }
})

// Mount the Vue app to the #app element in index.html
createApp(App)
  .use(vuetify)
  .mount('#app')

src/App.vue (Root Vuetify Component) #

A simple starting point for your new frontend:

<template>
  <v-app>
    <!-- Vuetify's main app wrapper -->
    <v-navigation-drawer v-model="drawer" app>
      <!-- Sidebar content -->
      <v-list>
        <v-list-item title="Home" to="/"></v-list-item>
        <v-list-item title="About" to="/about"></v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>My Vuetify App</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <v-container class="pa-4">
        <h1>Welcome to Vuetify!</h1>
        <v-btn color="primary" size="large">Click Me</v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

// Reactive state for sidebar drawer
const drawer = ref(false)
</script>

<style scoped>
/* Add custom component styles here */
</style>

src/index.html (HTML Template) #

The base HTML file that Webpack will inject your bundled JS into:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Vuetify + Express App</title>
</head>
<body>
  <!-- Vue app will mount here -->
  <div id="app"></div>
</body>
</html>

5. Update Your Express Server (app.js) #

We need to tell Express to serve the bundled frontend files from public/ and handle SPA routing (so Vue Router works if you add it later):

const express = require('express');
const path = require('path');
const app = express();

// Serve static files from Webpack's output directory
app.use(express.static(path.join(__dirname, 'public')));

// Keep your existing API routes
app.use('/api', require('./routes/api'));

// For all non-API requests, return the index.html file (SPA fallback)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Express server running on http://localhost:${PORT}`);
});

6. Add Scripts to package.json #

Update your scripts section to make running/building easier:

{
  "scripts": {
    "start": "node app.js",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

What each script does:

• npm start: Launches your Express server
• npm run dev: Starts Webpack Dev Server with hot reloading (great for development)
• npm run build: Bundles your frontend for production and outputs to public/

7. Test It Out! #

Development Workflow #

1. Start your Express server in one terminal: npm start
2. Start Webpack Dev Server in another terminal: npm run dev
3. Open your browser to http://localhost:8080 — you'll see your Vuetify app, and any changes you make to .vue files will auto-reload the page. All /api requests will be proxied to your Express server.

Production Deployment #

1. Run npm run build to generate optimized production files
2. Start your Express server with npm start
3. Visit http://localhost:3000 — your bundled frontend will be served directly from Express.

Quick Transition Tips #

• If you still need to use some EJS views temporarily, you can add a route that serves those files and link to the Webpack-generated bundle.js in the EJS template.
• For routing, add vue-router to your project later if you need a full SPA.
• Customize Vuetify's theme, components, and directives to match your project's needs — experiment with the createVuetify config to tweak things to your liking!

内容的提问来源于stack exchange，提问作者Bubun