一,开发环境中的配置:
1,前端:vue的vue.config.jsconst { 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/gotouch/public; server_name tpapibase; 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; } }
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: [email protected]
二,生产环境的配置:
1,后端:接口站的nginx虚拟主机配置[root@centos8 conf.d]# more touchphp.conf server { listen 8002; server_name touchphp.lhdtest.net; root /web/touchphp/public; index index.php; access_log /data/logs/nginxlogs/touchphp.access_log; error_log /data/logs/nginxlogs/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; } }测试效果:
http://touchphp.lhdtest.net:8002/home/home返回:
![](/i/l/?n=22&i=blog/1938691/202210/1938691-20221020164851590-744364566.png)
[root@centos8 conf.d]# more touchweb.conf server { listen 80; server_name touchweb.lhdtest.net; root /data/touchweb/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/nginxlogs/touchweb.access_log; error_log /data/logs/nginxlogs/touchweb.error_log; }
三,测试效果
![](/i/l/?n=22&i=blog/1938691/202210/1938691-20221020164851635-1153258654.png)
四,查看nginx/vue的版本:
nginx[root@centos8 nginx-1.18.0]# /usr/local/soft/nginx-1.18.0/sbin/nginx -v nginx version: nginx/1.18.0vue
root@lhdpc:/data/vue/imgtouch# npm list vue [email protected] /data/vue/imgtouch ├─┬ @vue/[email protected] │ └─┬ @vue/[email protected] │ └── [email protected] deduped └─┬ [email protected] └─┬ @vue/[email protected] └── [email protected] deduped标签:index,vue,37,nginx,php,root,fastcgi From: https://www.cnblogs.com/architectforest/p/16810470.html