如何替换Vue-cli项目中的webpack-dev-server为Express/Apache等生产服务器？

Absolutely! Replacing webpack-dev-server with a production-ready server like Express or Apache is totally doable, and it’s a common step for deploying Vue apps to production. Let’s break down both options with clear, actionable steps:

Express is a lightweight, flexible Node.js server that’s easy to configure and integrate with Vue apps. Here’s how to set this up with an independent configuration file:

1. First, build your Vue app for production
   Run the standard build command to generate optimized static files in the dist folder:

   npm run build
   

2. Set up Express dependencies and configuration

   • Install Express as a production dependency:

     npm install express --save-prod
     

   • Create an independent server configuration file (e.g., server.js) in your project root. This file will handle serving static assets and routing for your SPA:

     const express = require('express');
     const path = require('path');
     const compression = require('compression'); // Optional: for gzip compression
     const app = express();
     
     // Enable gzip compression (recommended for production)
     app.use(compression());
     
     // Serve static files from the Vue build output
     app.use(express.static(path.join(__dirname, 'dist'), {
       maxAge: '1d' // Optional: set cache headers for static assets
     }));
     
     // Handle all SPA routes by returning index.html (critical for Vue Router)
     app.get('*', (req, res) => {
       res.sendFile(path.join(__dirname, 'dist', 'index.html'));
     });
     
     // Use environment variable for port (common in production deployments)
     const PORT = process.env.PORT || 3000;
     app.listen(PORT, () => {
       console.log(`Production server running on port ${PORT}`);
     });
     

   • If you want to use gzip compression (highly recommended), install the compression package first:

     npm install compression --save-prod
     

3. Add a production start script
   Update your package.json to include a script for starting the Express server:

   "scripts": {
     "build": "vue-cli-service build",
     "start": "node server.js"
   }
   

   Now you can start the production server with npm start.

Apache is a widely used web server, perfect for hosting static Vue builds with minimal configuration.

1. Build your Vue app first
   Same as above, run npm run build to generate the dist folder with optimized assets.

2. Deploy the static files
   Copy all contents of the dist folder into Apache’s document root (typically /var/www/html on Linux) or the directory configured for your virtual host.

3. Configure Apache for Vue’s SPA routing
   Vue uses client-side routing, so you need to tell Apache to redirect all non-file/non-directory requests to index.html. Create a .htaccess file in your deployed directory (e.g., /var/www/html) with these rules:

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     # Don't rewrite requests for index.html, files, or directories
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     # Rewrite all other requests to index.html
     RewriteRule . /index.html [L]
   </IfModule>
   

   • Make sure Apache’s mod_rewrite module is enabled. On Debian/Ubuntu, you can enable it with:

     sudo a2enmod rewrite
     sudo systemctl restart apache2
     

4. Optional: Add caching headers
   To optimize performance, add cache rules to your .htaccess for static assets:

   <IfModule mod_expires.c>
     ExpiresActive On
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType application/javascript "access plus 1 month"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType image/jpeg "access plus 1 year"
   </IfModule>
   

   Enable mod_expires with sudo a2enmod expires and restart Apache.

• Environment Variables: Make sure to set production-specific environment variables in Vue’s .env.production file before building. These values are baked into the build, so they can’t be changed after npm run build.
• Security: For Express, consider adding middleware like helmet to set security headers. For Apache, review your server’s security configuration (e.g., disabling directory listing).
• Performance: Both servers benefit from enabling gzip compression and setting appropriate cache headers to reduce load times.

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