nginx部署php和vue等多个项目（nginx和php怎么交互）

本篇文章给大家谈谈nginx部署php和vue等多个项目，以及nginx和php怎么交互对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、nginx部署多个前后端项目
• 2、nginx 部署多个前端vue项目的3种方式，一篇文章搞定
• 3、nginx 部署 多个vue项目 端口代理配置问题
• 4、Nginx本地部署Vue项目
• 5、在服务器中使用Nginx部署打包的Vue项目
• 6、nginx同时部署多个vue项目后请求刷新一直转圈

nginx部署多个前后端项目

   第一个vue项目(不用修改配置直接build就可以)

http:// 127.0.0.1 /test02   第二个vue项目(需要修改)

1、首先在config文件夹内的index.js内修改(注意是build内)

build: {

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    //nginx配置

    assetsPublicPath: '/test2/',

    /**

    * Source Maps

    */

    productionSourceMap: true,

    //

    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

  }

}

2、这样确保生产出来的文件，在index.html中都是在student下。对index.html文件进行修改，添加base href="/test2/"

!DOCTYPE html

html

head

    !--新添加的--

    base href="/test2/"

    meta charset=utf-8

    meta name=viewport content="width=device-width,initial-scale=1"

    titletest1/title

    link href=/test2/static/css/app.abcac001105f87ab0ad14b37d34bbe9c.css rel=stylesheet

/head

body

div id=app/div

script type=text/javascript src=/test2/static/js/manifest.a96262ba9edf9a4c5761.js/script

script type=text/javascript src=/test2/static/js/vendor.a6129cab87d1dbebc84c.js/script

script type=text/javascript src=/test2/static/js/app.4694a2e388440c566511.js/script

/body

/html

3、在src/router/index.js文件修改，添加 base: '/test2/'

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({

  base:"/test2/",

  mode:"history",

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})

user root;

worker_processes  1;  #nginx进程个数

#worker_cpu_affinity 1000 0100 0010 0001;  #绑定worker进程到指定的CPU内核中

#error_log  logs/error.log;

#error_log  logs/error.log  notice;

#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {

    worker_connections  1024;  #worker进程的最大连接数是1024

}

http {

    #include      mime.types;

    # include /etc/nginx/conf.d/*.conf;

    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

    #                  '$status $body_bytes_sent "$http_referer" '

    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;

    #tcp_nopush    on;

    #keepalive_timeout  0;

    keepalive_timeout  65;

    upstream rest{

    least_conn;

    server 127.0.0.1:8000;

    server 127.0.0.1:8001;

}

    #gzip  on;

    server {

        listen      80;

        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #vue第一个项目

      location / {

            root  /usr/local/nginx/projects/dist;

            try_files $uri $uri/ @router;

            index  index.html index.htm;

        }

        #vue第二个项目

        location /test2 {

            alias /usr/local/nginx/projects/test2/;

            try_files $uri $uri/ /test2/index.html;

            index  index.html index.htm;

        }

        location @router {

    rewrite ^.*$ /index.html last;

}

#vue第一个项目后端接口

        location /api_a {

            #转发到后端uwsgi

                  proxy_pass ;

                # 设置请求头，并将头信息传递给服务器端

                  proxy_set_header Host $host;

                # 设置请求头，传递原始请求ip给 gunicorn 服务器

                  proxy_set_header X-Real-IP $remote_addr;

                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

                #                                                                   

        }

#vue第二个项目后端接口

        location /api_b {

            #转发到后端uwsgi

                  proxy_pass ;

                # 设置请求头，并将头信息传递给服务器端

                  proxy_set_header Host $host;

                # 设置请求头，传递原始请求ip给 gunicorn 服务器

                  proxy_set_header X-Real-IP $remote_addr;

                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

                #                                                                   

        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html

        #

        error_page  500 502 503 504  /50x.html;

        location = /50x.html {

            root  html;

        }

    }

}

nginx 部署多个前端vue项目的3种方式，一篇文章搞定

首先我们看一下nginx.conf配置文件

为了方便管理，在/usr/local/nginx/conf.d/ 创建自己的*.conf配置文件。没有conf.d目录，直接mkdir 创建conf.d

*.conf 详细可参考：

这种方式只需要开放80端口，然后访问二级域名。

这种方式的好处是只有一个server ,而且不需要二级域名、用路径location就能实现。

但是这种方式的一个缺点，就是vue项目前端需要改配置。修改地方如下：

react 配置请参考： ;utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2

vue 配置请参考：

nginx 部署 多个vue项目 端口代理配置问题

一 . 更改vue 前端项目 打包根路径

改为

由以上三中类型 运行打包命令后 把dist包 分别对应根路径的名称 重新命名

二. 把第一步拿到的三个项目压缩包 上传到远程服务 nginx 下的html文件夹下 如下：

更改 nginx.conf 配置如下

改成不同的名字“应该也行”打包后直接就是这个文件名 而不是dist

自己可以试一试没事）

(访问时最好在路径后 加个 '/')

更改配置后 重启项目即可

若在 项目运行中与后段接口 交互中出现问题可参考

Nginx本地部署Vue项目

如何使用Nginx来部署我们打包好的前端Vue项目

因为这里做的演示是本地服务，就需要安装在自己的电脑上

1.确认你的电脑是否安装homebrew，打开电脑终端输入：

2.确认homebrew是否安装成功，输入

3.安装nginx

4.确认nginx是否安装成功

6.进入bin目录

输入，启动

验证是否启动成功

如果出现下图，证明nginx已经启动成功

该问题是由于8080端口被占用，解决

首先需要先在打包之前在 Vue 的配置文件里去修改公共路径的配置

同时在项目的 router 目录下 index.js 为 Vue 项目指定路由基本路径为 /

8.打包前端项目,打包成 dist 目录

将打包好的前端项目放到 Nginx 的 html 目录下去

然后将 dist文件 拖到 html 中就可以了

修改一下 Nginx 的配置文件 nginx.conf

配置改动：

(1）端口号为 8088

(2) 服务名称为 localhost

(3)root目录为 html/dist

(4)location地址为 /

处理前台路由 history 模式刷新 404 的问题

配置修改好之后，我们就可以使用 Nginx 的命令来启动 Nginx 服务

如果没有任何提示，就说明 Nginx 服务重新加载配置成功了

浏览器地址栏里访问 了

1.安装nginx(window)

解压即可

2.准备打包好的vue项目(dist) 这里dist文件目录在D:\nginx-1.21.1\html\dist

3.在nginx安装目录中找到D:\nginx-1.21.1\conf）进行修改

vue history模式下nginx

常用的指令有：

在服务器中使用Nginx部署打包的Vue项目

在我们通过Vue-cli开发的项目，如何部署到服务中，能够使得别人也能访问我们写的项目呢，其操作与部署网页到服务器类似，其操作可参考 部署网页到服务器 ，也可跟着我往下一步一步的进行。

将打包好的dist文件上传到Nginx安装目录下的test/test1下（ 目录可随意 ），效果如下图所示：

在Nginx安装目录下，通过以下命令启动Nginx：

至此，在服务器中部署Vue项目已经完成了，即可以通过ip或域名访问了，效果如下所示：

如果Nginx是已经启动的，可通过以下命令重启Nginx：

可通过以下命令查看Nginx是否启动成功

希望能帮到你，不要忘了点个赞哟！

nginx同时部署多个vue项目后请求刷新一直转圈

在nginx中部署多个vue项目，并进行访问时，如果请求刷新一直转圈，可能是由于nginx的缓存配置问题引起的。

首先，你可以查看nginx的配置文件（默认是nginx.conf文件），确认是否开启了缓存功能。如果开启了缓存，那么在请求刷新时，可能会因为缓存未过期而一直等待下去，导致页面一直转圈。此时，你可以尝试关闭nginx缓存，或调整缓存时间，让其能够及时更新缓存内容。

其次，你也可以检查vue项目的路由配置和nginx的代理配置是否正确。如果代理配置有误，那么可能会导致请求无法正常转发，从而导致页面无法加载。在这种情况下，你可以根据具体的错误提示来排查问题，例如查看nginx的日志文件和浏览器的控制台输出等。

最后，如果以上方法都无法解决问题，你可以尝试进行网络诊断。例如使用ping命令测试服务器的连通性、使用traceroute命令追踪网络路径、检查服务器的负载等等。通过这些方法，你可以找到潜在的网络问题，并采取相应的措施来解决问题。

综上所述，请求刷新一直转圈是一个比较常见的问题，在排查时需要注意nginx的缓存配置、vue项目的路由配置和nginx的代理配置等问题。通过逐一排查，可以最终找到问题所在，并解决掉该问题。

nginx部署php和vue等多个项目的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于nginx和php怎么交互、nginx部署php和vue等多个项目的信息别忘了在本站进行查找喔。