当前位置： 首页 > news >正文

北京网站建设联系电话,科学小制作小发明,食品网站建设方案项目书,wordpress查找前端有子目录#xff0c;后端有项目名称#xff0c;请看第3种 第1种 前端nginx没有子目录#xff0c;后端也没有访问的项目名。这种是最简单的。 vue.config.js 只需要修改target中的IP和端口#xff0c;就是后端访问的IP和端口

vue.config.js

devServer: {host: 0.…前端有子目录后端有项目名称请看第3种 第1种 前端nginx没有子目录后端也没有访问的项目名。这种是最简单的。 vue.config.js 只需要修改target中的IP和端口就是后端访问的IP和端口

vue.config.js

devServer: {host: 0.0.0.0,port: port,open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {// 开发环境// target: http://192.168.1.120:8080,// 生产环境——–修改自己的IP和端口target: http://192.168.100.110:8080,changeOrigin: true,pathRewrite: {[^ process.env.VUE_APP_BASE_API]: }}},disableHostCheck: true}, .env.production

.env.production

删除里面的/prod-api

VUE_APP_BASE_API
操作 修改了上面的配置后直接输入npm run build:prod等待编译完成。然后把dist文件中的所有文件复制上传到nginx/html文件夹下面然后启动nginx即可。

结束

第2种 前端nginx没有子目录后端有自定义访问的项目名也就是项目访问的前缀。 vue.config.js 只需要修改target中的IP和端口追加了后端访问的项目名。下面的demo中的工程名称叫做usersystem

vue.config.js

devServer: {host: 0.0.0.0,port: port,open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {// 开发环境// target: http://192.168.1.120:8080/usersystem,// 生产环境——–修改自己的IP和端口项目名称target: http://192.168.100.110:8080/usersystem,changeOrigin: true,pathRewrite: {[^ process.env.VUE_APP_BASE_API]: }}},disableHostCheck: true}, .env.production

.env.productionVUE_APP_BASE_API /usersystem nginx.conf #user nobody;

worker_processes 1;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;# 文件大小限制默认1mclient_max_body_size 50m;client_header_timeout 1m;client_body_timeout 1m;proxy_connect_timeout 60s;proxy_read_timeout 1m;proxy_send_timeout 1m;# websocket需要增加该配置map \(http_upgrade \)connection_upgrade {default keep-alive;websocket upgrade;}#gzip on;upstream user_server_name{server 192.168.1.110:8080;}server {listen 80;server_name user.test.com;location / {index index.html index.htm;root /usr/nginx/html;try_files \(uri \)uri/ /index.html;}error_page 500 502 503 504 /50x.html;location /50x.html {root html;}error_page 404 /index.html;location /index.html {root /usr/nginx/html;}# 后台访问地址location /usersystem/ {# enterprise wechat testadd_header X-Content-Type-Options nosniff;proxy_set_header X-scheme \(scheme;proxy_set_header X-Real-IP \)remote_addr;proxy_set_header X-Forwarded-For \(proxy_add_x_forwarded_for;# 注意必须设置 Host否则使用 Java Client 无法正常访问 MinIOproxy_set_header Host \)http_host;proxy_set_header X-Nginx-Proxy true;proxy_hide_header X-Powered-By;proxy_hide_header Vary;client_max_body_size 2048m; proxy_pass http://user_server_name;# 重复提交情况proxy_next_upstream off;proxy_read_timeout 600;proxy_send_timeout 600;proxy_connect_timeout 600;}}server {listen 80;# 自己需要监听的域名server_name user.test.com;#将请求转成httpsrewrite ^(.*)\( https://\)host$1 permanent;}} 操作 修改了上面的配置后直接输入npm run build:prod等待编译完成。然后把dist文件中的所有文件复制上传到nginx/html文件夹下面然后启动nginx即可。

结束

第3种 前端需要部署在nginx的子目录中后端有访问的项目名。 vue.config.js 只需要修改target中的IP和端口就是后端访问的IP和端口 // vue.config.js// 前端部署在nginx/html/usersystemWeb文件夹里面也就是前端子目录名称 publicPath: process.env.NODE_ENV production ? /usersystemWeb/ : /,// 默认dist outputDir: usersystemWeb,devServer: {host: 0.0.0.0,port: port,open: true,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {// 开发环境// target: http://192.168.1.120:8080/usersystem,// 生产环境——–修改自己的IP和端口项目名称target: http://192.168.100.110:8080/usersystem,changeOrigin: true,pathRewrite: {[^ process.env.VUE_APP_BASE_API]: }}},disableHostCheck: true}, .env.production

.env.productionVUE_APP_BASE_API /usersystem

router/index.js  // router/index.jsexport default new Router({ // 在这里增加前端子目录的名称base:/usersystemWeb/,mode: history, // 去掉url中的#scrollBehavior: () ({ y: 0 }),routes: constantRoutes }) public/index.html !DOCTYPE html htmlheadmeta charsetutf-8!– 在这里增加自己的子目录名称 –meta base/aiot/meta http-equivX-UA-Compatible contentIEedge,chrome1meta namerenderer contentwebkitmeta nameviewport contentwidthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalableno /link relicon href% BASE_URL %logo.icotitle% webpackConfig.name %/title!–[if lt IE 11]scriptwindow.location.href/html/ie.html;/script![endif]–style/style/headbodydiv idappdiv idloader-wrapperdiv idloader/divdiv classloader-section section-left/divdiv classloader-section section-right/div!– div classload_title正在加载系统资源请耐心等待/div –/div/div/body /htmlnginx.conf #user nobody; worker_processes 1;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;# 文件大小限制默认1mclient_max_body_size 50m;client_header_timeout 1m;client_body_timeout 1m;proxy_connect_timeout 60s;proxy_read_timeout 1m;proxy_send_timeout 1m;# websocket需要增加该配置map \(http_upgrade \)connection_upgrade {default keep-alive;websocket upgrade;}#gzip on;upstream websocket_name{server 192.168.1.15:11108;}upstream user_server_name{server 192.168.1.110:8080;}server {listen 80;server_name user.test.com;location ^~/usersystemWeb {# 前端子目录文件夹名称alias /usr/local/nginx/html/usersystemWeb/;try_files \(uri \)uri/ /usersystemWeb/index.html;index index.html;}# 后台访问地址location /usersystem/ {# enterprise wechat testadd_header X-Content-Type-Options nosniff;proxy_set_header X-scheme \(scheme;proxy_set_header X-Real-IP \)remote_addr;proxy_set_header X-Forwarded-For \(proxy_add_x_forwarded_for;# 注意必须设置 Host否则使用 Java Client 无法正常访问 MinIOproxy_set_header Host \)http_host;proxy_set_header X-Nginx-Proxy true;proxy_hide_header X-Powered-By;proxy_hide_header Vary;client_max_body_size 2048m; proxy_pass http://user_server_name;# 重复提交情况proxy_next_upstream off;proxy_read_timeout 600;proxy_send_timeout 600;proxy_connect_timeout 600;}# 重点在这里websocket后面没有斜杠和其它项目的区别location /websocket {proxy_pass http://websocket_name;proxy_read_timeout 300s;proxy_send_timeout 300s;proxy_redirect off;proxy_set_header Host \(host:5052;proxy_set_header X-Real-IP \)remote_addr;proxy_set_header REMOTE-HOST \(remote_addr;proxy_set_header X-Forwarded-For \)proxy_add_x_forwarded_for;#升级http1.1到 websocket协议proxy_http_version 1.1;proxy_set_header Upgrade \(http_upgrade;proxy_set_header Connection \)connection_upgrade;}}server {listen 80;# 自己需要监听的域名server_name user.test.com;#将请求转成httpsrewrite ^(.*)\( https://\)host$1 permanent;}} 操作 修改了上面的配置后直接输入npm run build:prod等待编译完成。然后把usersystemWeb文件中的所有文件复制上传到nginx/html/usersystemWeb文件夹下面然后启动nginx即可。 nginx安装教程

安装nginx的依赖包

yum -y install gcc gcc- c pcre-devel openssl-devel wget# 自己创建文件夹 cd /opt/myNginx# 下载nginx安装 wget http://nginx.org/download/nginx-1.12.2.tar.gz # 解压nginx-1.12.2的压缩包 tar xf nginx-1.12.2.tar.gz# 进入nginx-1.12.2 文件目录 cd nginx-1.12.2 # 配置检测环境、文件目录在/usr/local/nginx这是需要SSL的命令

如果不需要就执行./configure –prefix/usr/local/nginx命令

./configure –prefix/usr/local/nginx –with-http_stub_status_module –with-http_ssl_module# 编译 make make install# 制作软连接 ln -sv /usr/local/nginx/sbin/nginx /usr/bin/nginx# 修改环境变量 vim /etc/profile# 按下i键在profile文件末尾加上下面的代码 PATH$PATH:/usr/local/nginx/sbin# 按下esc键然后输入:wq来退出

刷新配置文件

source /etc/profile nginx启动停止命令

nginx-cmd.sh# 每次修改配置文件需要重新启动第一次启动必须使用start命令不能使用restart命令

启动

sh /usr/local/nginx/nginx-cmd.sh start

停止

sh /usr/local/nginx/nginx-cmd.sh stop

重启

sh /usr/local/nginx/nginx-cmd.sh restart#!/bin/bash

Nginx可执行文件路径 别忘了换成你自己安装的路径

NGINX_PATH/usr/local/nginx/sbin/nginxstart() {echo Starting Nginx…\(NGINX_PATH }stop() {echo Stopping Nginx...\)NGINX_PATH -s stop }restart() {echo Restarting Nginx…\(NGINX_PATH -s reload }case \)1 instart)start;;stop)stop;;restart)restart;;*)echo Usage: $0 {start|stop|restart}exit 1;; esacexit 0