如何在同一服务器上部署并运行Vue.js与PHP应用？

Hey there! Let's walk through how to get your Vue.js frontend and PHP/MySQL backend running on the same server—whether you're refining things locally on your Mac or gearing up for a production setup.

Local Development Integration (Mac + MAMP) #

Right now you've got two separate servers running, but we can make them play nice so you don't have to deal with cross-origin issues and everything feels like it's on the same server.

Option 1: Use Vue's Dev Server Proxy (Best for Active Development) #

This lets you keep using npm run dev for hot-reloading in Vue, while automatically forwarding API requests to MAMP's Apache server.

1. In your Vue project, create or edit the vue.config.js file in the root directory:

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:8888',
           changeOrigin: true,
           pathRewrite: {
             '^/api': '' // Remove the /api prefix from your request if your PHP scripts don't use it
           }
         }
       }
     }
   }
   

2. Restart your Vue dev server with npm run dev.
3. Now, when you send requests from Vue (e.g., axios.post('/api/your-endpoint.php')), it'll automatically forward to http://localhost:8888/your-endpoint.php. No more CORS errors, and all traffic appears to come from localhost:8080.

Option 2: Serve Vue's Built Files via MAMP (Good for Testing Static Builds) #

If you want to test how everything works together on Apache without the Vue dev server:

1. Run npm run build in your Vue project—this generates a dist folder with all your static frontend files.
2. Copy the contents of the dist folder into MAMP's htdocs directory (usually /Applications/MAMP/htdocs). You can put them in a subfolder like vue-app if you want.
3. Access your Vue app via localhost:8888/vue-app (or just localhost:8888 if you copied directly to htdocs). Your PHP scripts are already in htdocs, so requests to them will work seamlessly from the Vue app.

Production Deployment (Same Server) #

Whether you're deploying to a local production setup on your Mac or a cloud server, the steps are similar:

1. Build Your Vue App: Run npm run build to generate the optimized static files in the dist folder.
2. Set Up Apache:
   • Copy all files from dist into your Apache root directory (MAMP's htdocs or /var/www/html on Linux servers).
   • Place your PHP backend files in a subfolder (e.g., api) within the same root directory. Your setup will look like this:

     htdocs/
     ├── index.html (Vue's entry point)
     ├── css/
     ├── js/
     └── api/
         ├── user.php
         └── database-handler.php
     

   • Enable mod_rewrite (usually enabled by default in MAMP; on Linux servers you may need to run a2enmod rewrite and restart Apache). Create a .htaccess file in the root directory to handle Vue's history mode routing:

     <IfModule mod_rewrite.c>
       RewriteEngine On
       RewriteBase /
       RewriteRule ^index\.html$ - [L]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule . /index.html [L]
     </IfModule>
     

3. Configure MySQL: Update your PHP scripts to connect to the local MySQL server (use localhost as the host, and the username/password set in MAMP or your server's MySQL config).
4. Test: Start Apache and MySQL (via MAMP's control panel or server commands) and access your site via localhost (or your server's domain/IP). Both frontend and backend will run on the same server, with no cross-origin issues.

Quick Tip #

If you want to avoid port numbers entirely in local development, go to MAMP's Preferences > Ports and set Apache to port 80 and MySQL to 3306 (the default standard ports). Then you can access everything via localhost without adding :8888 or :8080.

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