vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)

一，开发环境中的配置:

1,前端:vue的vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  devServer:{
    open:false,   //如值为true时，会自动打开浏览器
    proxy:{
      '/api':{
        target:`http://127.0.0.1:8002`,
        pathRewrite:{'^/api':''},
        changeOrigin:true,
      }
    },
  }
})

2,后端:接口站的nginx虚拟主机配置:

root@lhdpc:/etc/nginx/sites-enabled# more gotouch.conf
server {
        listen       8002;
        root   /data/php/xxxxx/public;
        server_name xxxx;
        index  index.php;
        if (!-e $request_filename) {
            rewrite ^/(.*)$ /index.php?s=$1 last;
             break;
        }
        location / {
           index  index.html index.php;
        }
        location ~ \.php {
                fastcgi_pass   127.0.0.1:9000;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                include        fastcgi_params;
        }
    }

 

二，生产环境的配置:

1,后端:接口站的nginx虚拟主机配置

[root@centos8 conf.d]# more xxxx.conf
server {
    listen       8002;
    server_name   xxx.net;
    root         /web/xxxx/public;
    index  index.php;
    access_log      /data/logs/xxxx/touchphp.access_log;
    error_log       /data/logs/xxx/touchphp.error_log;
        if (!-e $request_filename) {
            rewrite ^/(.*)$ /index.php?s=$1 last;
             break;
        }
        location / {
           index  index.html index.php;
        }
        location ~ \.php {
                fastcgi_pass   127.0.0.1:9000;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                include        fastcgi_params;
        }
}

 

2,前端vue站

[root@centos8 conf.d]# more xxxx.conf
server {
    listen       80;
    server_name  xxxx.net;
    root         /data/XXXX/web/html;
    index         index.html;
    location /api {
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_pass http://localhost:8002;
        proxy_redirect off;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header X-Ngnix-Proxy true;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
    access_log      /data/logs/xxxx/access_log;
    error_log       /data/logs/xxxxx/error_log;
}