nginx.conf里要加上對laravel的靜態文件目錄的轉發(這里假設我的靜態文件在public/static下)、修改vue的nginx配置。

我們以在我本地的開發環境為例，windows7+nginx+Vue+Laravel5，假設我想使用的域名是zh30.com。

想達成的效果：我們想直接訪問時使用Vue開發的單頁面應用index.html，做為我們的前臺交互，且在Vue中使用history路由模式。后臺和接口使用laravel框架進行開發，所以想使用zh30.com/admin 來訪問后臺管理，接口交互想使用zh30.com/api/xxx。

第一步，本地解析hosts，zh30.com指向到127.0.0.1 。。。。

第二步，配置nginx的主server，它用來接受我們的所有請求，并進行代理轉發。

server {
? ? ? ? listen 80;
? ? ? ? server_name zh30.com;
? ? ? ?
? ? ? ? location / {
? ? ? ? ? ? proxy_set_header X-Real-IP $remote_addr;
? ? ? ? ? ? proxy_set_header Host $host;
? ? ? ? ? ? proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? ? ? ? ? proxy_pass http://127.0.0.1:8181;
? ? ? ? }

? ? ? ? location ~ ^/(admin|api|static) {
? ? ? ? ? ? proxy_set_header X-Real-IP $remote_addr;
? ? ? ? ? ? proxy_set_header Host $host;
? ? ? ? ? ? proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? ? ? ? ? proxy_pass http://127.0.0.1:8282;
? ? ? ? }
}

第三步，配置Vue的server，這里假設我的Vue項目build在D:/wwwroot/myvueproject/dist目錄。此server的作用是，把從主server 8181 QQ代理過來的請求全部rewrite到index.html，以支持Vue的history模式路由。

server {
? listen 8181;

? root "D:/wwwroot/myvueproject/dist";

? index index.html;

? server_name localhost;

? location / {
? ? try_files $uri $uri/ /index.html =404;
? }
}

第四步，配置Laravel的server，假設laravel項目在D:/wwwroot/mylaravelproject/。此server的作用是，把從主server 8282代理來的請求（以/admin或/api開頭），全部rewrite到public的index.php，實現laravel的路由系統。

server {

? ? listen 8282;

? ? server_name localhost;
? ? root "D:/wwwroot/mylaravelproject/public";
? ? index index.php;

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

? ? location ~ \.php(.*)$ {
? ? ? ? ? ? fastcgi_pass ? 127.0.0.1:9001;
? ? ? ? ? ? fastcgi_index ?index.php;
? ? ? ? ? ? fastcgi_split_path_info ?^((?U).+\.php)(/?.+)$;
? ? ? ? ? ? fastcgi_param ?SCRIPT_FILENAME ?$document_root$fastcgi_script_name;
? ? ? ? ? ? fastcgi_param ?PATH_INFO ?$fastcgi_path_info;
? ? ? ? ? ? fastcgi_param ?PATH_TRANSLATED ?$document_root$fastcgi_path_info;
? ? ? ? ? ? include ? ? ? ?fastcgi_params;
? ? ? ? }
}

第五步，重啟Nginx，完成！

可能遇到的問題：暫無。。。

總結

以上是生活随笔為你收集整理的使用Nginx反向代理部署laravel和history模式的Vue项目[更新]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。