laravel +vue +ngin部署項目

方式一(適用于一個接口多個vue頁面)

此方式需要部署兩個站點，主要是通過nginx代理

1.laravel-api的后臺接口部署

laravel項目的需要正常部署，部署的根目錄

根目錄： D:/phpEnv/www/vueshop/public

nginx的配置文件

//本地接口監(jiān)聽
{
    listen 8055;
    server_name localhost;
    index index.html index.htm index.php;
    root D:/phpEnv/www/vueshop/public;
    ......

    ##需要添加的偽靜態(tài)配置
    location / {  
    try_files $uri $uri/ /index.php$is_args$query_string;  
    }  

}

2.部署vue打包之后的dist文件，這也是一個站點，純靜態(tài)文件的站點，vue.config.js默認參數(shù)直接打包即可，將dist作為項目根目錄。

根目錄： D:/phpEnv/www/vueshop/public/dist(隨便放，不一定和laravel-api的放在一塊，可以單獨放一個文件)

nginx的配置文件

{
    
     listen 8055;
    server_name 192.168.1.5;
    index index.html index.htm index.php;
    root D:/phpEnv/www/vueshop/public;


    ##vue項目部署的文件
    location / {
    try_files $uri $uri/ /index.html;
    }


    ###關(guān)鍵代理部分，
    例如：www.vueshop.cn/api/v1/login需要代理代理到127.0.0.1:8055的地址上

    location /api { 
        proxy_pass http://localhost:8055;    
             
        rewrite  ^/api/(.*)$ /api/$1 break;        
        
    }
}

重要的代理部分

     location /api {   ##匹配url中帶有api的，并轉(zhuǎn)發(fā)到http://localhost:8080/api,這里的api要看你自己接口是什么來確定（找到誰）

        proxy_pass http://localhost:8055;    ##代理的地址，www.vueshop.cn=>http://localhost:8055（給誰）
             
        rewrite  ^/api/(.*)$ /api/$1 break;    ##見下面詳細

        ###
        例子：www.vueshop.cn/api/v1/login =>127.0.0.1:8055/api/v1/login

        ##rewrite  ^/api/(.*)$（正則匹配地址） /api/$1 break；

        ##理解$1的真實，我這里的 $1 就是例子中的(v1/login),而我的接口地址為（/api/v1/login）,所以需要寫成 /api/$1，一開始我是沒有注意，參考網(wǎng)上的寫成 /$1,結(jié)果系統(tǒng)一直報404，這里一定根據(jù)自己的后臺接口來填寫
        
    }

方式二（適用于一個接口一個vue頁面）

此方式需要部署一個站點，主要是通過nginx路由匹配

建立站點

laravel項目的需要正常部署,很普通的部署，不用修改配置文件

根目錄： D:/phpEnv/www/vueshop/public

nginx的配置文件

    //本地接口監(jiān)聽
    {
        listen 8055;
        server_name localhost;
        index index.html index.htm index.php;
        root D:/phpEnv/www/vueshop/public;
        ......

      

    }

vue打包，修改vue.config.js,具體配置如下：

    //項目資源獲取的前綴,比如: http://www.vueshop.cn/app/static/js/chunk-6f78a7b1.5a78a1b0.js,其中的app就是這個參數(shù)在起作用，這里不能保留默認，一定要加參數(shù)，不然的圖片請求不到
    publicPath: '/app',

    //打包后的文件存儲位置，這里我打包讓文件直接存儲在laravel-api接口項目的public里面，可以根據(jù)自己的需求設(shè)置,打包后的文件需要放在根目錄的二級目錄里面

    outputDir:站點根目錄+app , //用于每次build 先刪除dist 在創(chuàng)建
    // outputDir: path.resolve(__dirname,'../public/appname'), //用于每次build 先刪除dist 在創(chuàng)建
    runtimeCompiler: true, //關(guān)鍵點（吐槽一下不知道啥用?。?
    //打包靜態(tài)資源前綴
    assetsDir: "static",

打包之后生成之后的根目錄下的結(jié)構(gòu)

larvel站點的根目錄

D:/phpEnv/www/vueshop/public/
    |-- 404.html
    |-- app (vue打包的文件)                                                                                
    |   |-- favicon.ico
    |   |-- img
    |   |-- index.html
    |   |-- manifest.json
    |   |-- precache-manifest.e682c6517d44bd5f7605aead8cf28190.js
    |   |-- precache-manifest.e682c6517d44bd5f7605aead8cf28190.js.gz
    |   |-- robots.txt
    |   |-- service-worker.js
    |   `-- static
    |-- favicon.ico
    |-- implement.php
    |-- index.php

3.修改配置文件

第一種配置（一個站點一個接口請求前綴）

    ##進入vue項目
    location / {
        root D:/phpEnv/www/vueshop/public/app;
        try_files $uri $uri/ /index.html;
    }

    ###接口請求的偽靜態(tài)
    location /api {
        try_files $uri $uri/ /index.php$is_args$query_string;  
    }

    

第二種配置（一個站點多個接口請求前綴，此種方式刷新出現(xiàn)404有問題,所以這樣配置的話將router.js中的mode修改一下）

        ##進入vue項目
        location /app {
        
            try_files $uri $uri/ /app/index.html;
        }

        ###接口請求的偽靜態(tài)
        location / {
            try_files $uri $uri/ /index.php$is_args$query_string;  
        }

    

    new Router({
    mode: 'hash',
    // 關(guān)閉history
    // mode: 'history',
    });

注意：如果文中沒有提到修改router.js中的mode，都是采用的history