Vue.js生产构建部署咨询：仅上传dist目录是否正确及服务器运行方法

Hey there! Great questions—let's break this down clearly for you.

1. Is uploading only the dist directory correct? #

Absolutely, this is the right approach! Here's why:

• When you run npm run build, Vue compiles and optimizes your entire project into production-ready static assets (minified HTML, CSS, JS files, plus any images/fonts you used) and outputs them into the dist folder. These are all the files needed to serve your app to end users.
• Uploading the full project directory would include unnecessary files like your uncompiled source code, the massive node_modules folder, and development-only configs. This wastes VM storage space and could expose your unprocessed code unnecessarily.

So stick with just uploading the dist folder—you're doing it perfectly!

2. How to run the server for production? #

You’re totally right that npm run serve is only for local development (it uses a dev server with hot-reloading and other tools meant for coding, not production traffic). For public deployment, you need a dedicated static file server. Here are the most common, reliable options:

Option 1: Nginx (Recommended for Production) #

Nginx is a high-performance, lightweight web server that’s ideal for serving static assets and handling real-world traffic efficiently. Here’s how to set it up:

• Install Nginx on your VM (the command varies by OS: for Ubuntu/Debian, use sudo apt update && sudo apt install nginx; for CentOS/RHEL, use sudo dnf install nginx).
• Copy all contents of your local dist folder to Nginx’s default static directory—most systems use /usr/share/nginx/html (run sudo cp -r /path/to/your/local/dist/* /usr/share/nginx/html/).
• Critical for Vue single-page apps: If your app uses Vue Router in history mode, update Nginx’s config to handle routing correctly. Open the default config file (usually /etc/nginx/sites-available/default) and replace the location / block with:

  location / {
      try_files $uri $uri/ /index.html;
  }
  

• Restart Nginx to apply changes: sudo systemctl restart nginx.
• Your app should now be accessible via your VM’s public IP or domain.

Option 2: Node.js serve Package (Quick & Simple) #

If you prefer sticking with Node.js, the serve package is a lightweight static server great for testing or small-scale deployments:

• Install it globally on your VM: npm install -g serve.
• Navigate to the parent directory of your uploaded dist folder, then run: serve -s dist. The -s flag ensures it handles Vue Router’s history mode properly.
• By default, it serves your app on port 3000. To use the default HTTP port (80) (so users don’t need to add a port number), run it with sudo: sudo serve -s dist -l 80.

Option 3: Apache Web Server #

If your VM already has Apache installed, you can use it too:

• Copy your dist contents to Apache’s default document root (usually /var/www/html).
• For Vue Router history mode, create a .htaccess file in /var/www/html with this content:

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

• Enable Apache’s rewrite module if it’s not already active: sudo a2enmod rewrite, then restart Apache: sudo systemctl restart apache2.

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