如何将内置VueJS的Laravel应用部署到生产服务器？

嘿，我来帮你搞定这个问题——其实你完全没必要把public目录里的文件移出来，这反而会给Vue的静态资源路径添乱！下面给你两种方案，优先推荐第一种官方标准做法：

方案一：服务器根目录指向public（推荐，无风险） #

这是Laravel官方最推荐的部署方式，既能保证项目安全（避免暴露根目录下的.env等敏感文件），又能完美适配Vue的资源路径。

1. 先在本地编译Vue生产资源 #

部署前，一定要在本地运行编译命令，把Vue组件打包成生产环境可用的静态文件：

npm run build

这会把编译后的app.js、app.css等文件放到项目的public/js和public/css目录下，生产环境必须用这些编译后的文件，不能用开发时的热加载资源。

2. 配置服务器根目录 #

不管你用的是Apache、Nginx还是cPanel/Plesk这类面板，核心操作都是把网站的根目录设置为Laravel项目的public文件夹，而不是项目的根目录。

Apache配置示例

修改你的虚拟主机配置或者面板里的.htaccess设置：

<VirtualHost *:80>
    ServerName your-domain.com
    DocumentRoot /var/www/your-laravel-project/public

    <Directory /var/www/your-laravel-project/public>
        Options -Indexes +FollowSymLinks +MultiViews
        AllowOverride All
        Require all granted

        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.php$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.php [L]
    </Directory>
</VirtualHost>

Nginx配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/your-laravel-project/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;
    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock; # 替换成你的PHP-FPM路径
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

如果用cPanel这类面板，直接在域名管理里找到“根目录”设置，选择项目下的public文件夹即可，不用手动写配置。

方案二：强制移出public文件（不推荐，仅用于服务器受限场景） #

如果你的服务器限制必须把入口文件放在根目录，那需要调整3个地方才能让Vue正常工作：

1. 修改根目录的index.php #

把从public目录移出来的index.php里的路径修改，同时指定public路径：

// 原代码
require __DIR__.'/../vendor/autoload.php';
$app = require_once __DIR__.'/../bootstrap/app.php';

// 修改后
require __DIR__.'/vendor/autoload.php';
$app = require_once __DIR__.'/bootstrap/app.php';

// 新增：告诉Laravel静态资源的根目录是当前目录
$app->bind('path.public', function() {
    return __DIR__;
});

2. 调整Vue的编译输出路径 #

打开项目根目录的webpack.mix.js，把输出路径里的public/前缀去掉，让编译后的资源输出到根目录：

// 原代码
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// 修改后
mix.js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

修改完后，重新运行npm run build，把编译后的资源生成到根目录的js和css文件夹。

3. 调整.htaccess规则 #

把移到根目录的.htaccess里的重写规则调整为：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

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