laravel +vue +ngin部署项目,解决接口404

laravel +vue +ngin部署项目

方式一(适用于一个接口多个vue页面)

此方式需要部署两个站点，主要是通过nginx代理

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

laravel项目的需要正常部署，部署的根目录

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

nginx的配置文件

//本地接口监听
{
    listen 8055;
    server_name localhost;
    index index.html index.htm index.php;
    root D:/phpEnv/www/vueshop/public;
    ......

    ##需要添加的伪静态配置
    location / {  
    try_files $uri $uri/ /index.php$is_args$query_string;  
    }  

}

2.部署vue打包之后的dist文件，这也是一个站点，纯静态文件的站点，vue.config.js默认参数直接打包即可，将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;
    }


    ###关键代理部分，
    例如：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的，并转发到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，一开始我是没有注意，参考网上的写成 /$1,结果系统一直报404，这里一定根据自己的后台接口来填写
        
    }

方式二（适用于一个接口一个vue页面）

此方式需要部署一个站点，主要是通过nginx路由匹配

建立站点

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

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

nginx的配置文件

    //本地接口监听
    {
        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就是这个参数在起作用，这里不能保留默认，一定要加参数，不然的图片请求不到
    publicPath: '/app',

    //打包后的文件存储位置，这里我打包让文件直接存储在laravel-api接口项目的public里面，可以根据自己的需求设置,打包后的文件需要放在根目录的二级目录里面

    outputDir:站点根目录+app , //用于每次build 先删除dist 在创建
    // outputDir: path.resolve(__dirname,'../public/appname'), //用于每次build 先删除dist 在创建
    runtimeCompiler: true, //关键点（吐槽一下不知道啥用啊）

    //打包静态资源前缀
    assetsDir: "static",

打包之后生成之后的根目录下的结构

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;
    }

    ###接口请求的伪静态
    location /api {
        try_files $uri $uri/ /index.php$is_args$query_string;  
    }

    

第二种配置（一个站点多个接口请求前缀，此种方式刷新出现404有问题,所以这样配置的话将router.js中的mode修改一下）

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

        ###接口请求的伪静态
        location / {
            try_files $uri $uri/ /index.php$is_args$query_string;  
        }

    

    new Router({
    mode: 'hash',
    // 关闭history
    // mode: 'history',
    });

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