首页 > 系统相关 >vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / [email protected])

vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / [email protected])

时间:2023-06-16 18:48:09浏览次数:54  
标签:index vue log 37 nginx proxy php fastcgi

一,开发环境中的配置:

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;
}
复制代码

标签:index,vue,log,37,nginx,proxy,php,fastcgi
From: https://www.cnblogs.com/saonian/p/17486281.html

相关文章

  • nginx升级和去除http响应中的Server头信息
    这两天接到个需求,就是去除http响应中的Server头信息,说是容易被黑客利用进行有针对的攻击,这个理由很充分,还是要安排上。 我们的http是nginx做的反向代理,于是需求就变成了  Nginx去除HTTPServer头查找了一番,大部分都是隐藏nginx版本server_tokensoff;配置类似于:user......
  • vue-文字转语音
    vueSpeechSynthesisUtterance监听事件onstart开始合成onend合成结束onerror合成错误onpause暂停onresume恢复暂停onboundary在句子或单词边界<template><divclass="language"><!--<divclass="right-lanage">--><imgsrc=&q......
  • vue实现点击按钮一键复制功能
    点击复制按钮后,将内容一键复制下来,不用去选中复制第一种直接使用js方式:<divclass="mask-cont"><p><inputid="input"/></p><buttonclass="btns"@click="copyToClip">复制</button></div>copyToClip()......
  • 【vue】vue全家桶是什么?
    Vue全家桶一般来说包括项目构建工具vue-cli、路由管理器vue-Router、状态管理模式vuex、网络请求库Axios、ui框架、打包工具webpack,下面我们分别介绍。1.项目构建工具:vue-cliVue.js+webpack的项目模板。Vuecli提供了强大的功能,用于定制新项目、配置原型、添加插件和检查webpac......
  • 图解LeetCode——437. 路径总和 III
    一、题目给定一个二叉树的根节点root ,和一个整数targetSum,求该二叉树里节点值之和等于targetSum的路径的数目。路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点)。二、示例2.1>示例1:【输入】root=[10,5,-3,3,2,null......
  • vue技术点归纳
    1.vue是什么?vue是一套构建用户界面的渐进式框架,核心库只关注视图层。vue和react相同点:1.都使用virtualDOM;2.提供了响应式(reactive);3.组件化(composable)的视图组件;4.都支持native方案;5.都支持SSR服务端渲染;6.都支持props进行父子组件通信;不同之处就是:1.数据......
  • Nginx配置
    下载安装:http://nginx.org/en/download.html下载稳定版启动cmd即可startnginxtasklist/fi"imagenameeqnginx.exe"修改端口号localhost:80或者127.0.0.1打开重启:.\nginx-sreload停止:.\nginx-squit.\nginx-sstopnginx-t判断问题在第几行nginx.con......
  • 关于vue2路由跳转问题记录
    1.vue路由间跳转和新开窗口的方式(query,params)路由间跳转配置:query方式:参数会在url中显示this.$router.push({path:'路由地址',query:{msg:'helloworld'}})params方式:传参数据不会在导航栏中显示,需要配合路由的name属性使用。this.$......
  • Vue3 设置全局变量
    方式一:main.js设置全局变量importapifrom'@/api'app.config.globalProperties.$api=api使用全局变量,使用getCurrentInstance方法。//ctx.$api就是全局设置的变量const{proxy:{$api},}=getCurrentInstance();//ctx.$api就是全局设置的变量con......
  • 直播平台怎么搭建,vue 中判断数组中是否有重复的数据
    直播平台怎么搭建,vue中判断数组中是否有重复的数据  isRepeat(v){   letobj={}   for(letiinv){    if(obj[v[i]]){     returntrue    }    obj[v[i]]=true   }   returnfalse  },​ 以上就是......