在Linux环境下 nginx 部署vue打包项目

nginx配置反向代理

nginx

常用命令：

在Nginx sbin目录下 cd /www/server/nginx/sbin

./nginx 启动
./nginx -s reload 重启
./nginx -s stop 停止

配置文件：nginx.conf

user  www www;
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;events{use epoll;worker_connections 51200;multi_accept on;}http{include       mime.types;#include luawaf.conf;include proxy.conf;default_type  application/octet-stream;server_names_hash_bucket_size 512;client_header_buffer_size 32k;large_client_header_buffers 4 32k;client_max_body_size 50m;sendfile   on;tcp_nopush on;keepalive_timeout 60;tcp_nodelay on;fastcgi_connect_timeout 300;fastcgi_send_timeout 300;fastcgi_read_timeout 300;fastcgi_buffer_size 64k;fastcgi_buffers 4 64k;fastcgi_busy_buffers_size 128k;fastcgi_temp_file_write_size 256k;fastcgi_intercept_errors on;gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;gzip_vary on;gzip_proxied   expired no-cache no-store private auth;gzip_disable   "MSIE [1-6]\.";limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver:10m;server_tokens off;access_log off;server {#  dy.xmclaw.com
# SSL 证书设置
#    listen    80;      #（http）监听端口号listen    443 ssl;    #ssl（https）监听端口号server_name dy.xmclaw.com;    #域名（浏览器访问地址）ssl_certificate /www/wwwroot/ssl/7654229_dy.xmclaw.com.pem;       #ssl pem文件（阿里云服务器配置域名地方获取下载就行）ssl_certificate_key /www/wwwroot/ssl/7654229_dy.xmclaw.com.key;    #ssl key文件ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;#  if ($http_Host !~* ^ebrand.eastobacco.com$){#       return 403;
#   }#  if ($request_method !~* GET|POST){#                 return 403;
#         }location / {     #同一级别location 名称不能重复root /www/wwwroot/dy_web/dist; #项目放置根目录（vue打包dist放置位置）index index.html index.htm;autoindex off;}
#反向代理，在vscode中vue.config.js中代理aoqlocation /aoq/ { proxy_pass  http://127.0.0.1:9999/;#这里我的项目挂在当前服务器上，访问后端接口是9999，没有接接口名，就直接访问的是本地的IP地址}}
server {#  erp.xmclaw.com
# SSL 证书设置listen    443 ssl;ssl_certificate /www/wwwroot/ssl/5412007_erp.xmclaw.com.pem;ssl_certificate_key /www/wwwroot/ssl/5412007_erp.xmclaw.com.key;    server_name erp.xmclaw.com;# 后端api接口设置location /api/ {include  uwsgi_params;rewrite ^/api/(.*) /$1 break;uwsgi_pass  127.0.0.1:8002;# uwsgi_param UWSGI_SCRIPT py_contract_approval/wsgi.py;# uwsgi_param UWSGI_CHDIR /usr/src/py_contract_approval;# client_max_body_size 35m;}#  前端页面展示location / {root /www/wwwroot/xmc_admin/dist;index index.html index.htm;# try_files $uri $uri/ /index.html;}# 静态图片托管location /image/ {alias   /www/wwwroot/imge/;autoindex on;}}#  默认跳转到httpsserver {listen 80;server_name dy.xmclaw.com;
#           rewrite ^ https:/$http_host$request_uri? permanent;}include /www/server/panel/vhost/nginx/*.conf;
}

vue

vue.config.js

module.exports = {// publicPath: './',// 配置跨域请求devServer: {port: 8080,//vue地址host: 'localhost',open: true,https: false,proxy: {'/api': {target: 'http://192.168.2.250:9999',//目标网址ws: true,changeOrigin: true,//放行跨域secure: false,pathRewrite: {'^/api': ''}},'/aoq': {target: 'http://47.103.219.194:9999',ws: true,changeOrigin: true,secure: false,pathRewrite: {'^/aoq': ''}}}},
}

请求axios.js

import axios from 'axios'axios.defaults.timeout = 5000
axios.defaults.baseURL = '/api'//线下//axios.defaults.baseURL = '/aoq'//线上axios.defaults.headers.post['Content-Type'] = 'application/json';//请求头部//路由拦截
axios.interceptors.request.use(config => {if (window.localStorage.getItem('token')) {config.headers.token = `${window.localStorage.getItem('token')}`}console.log(config)return config},err => {return Promise.reject(err)}
)
// /* 函数节流 */
// function debounce (fn, wait) {//     let timerId = null
//     let flag = true
//     return function () {//       clearTimeout(timerId)
//       if (flag) {//         fn.apply(this, arguments)
//         flag = false
//       }
//       timerId = setTimeout(() => {//         flag = true
//       }, wait)
//     }
//   }//   const authError = debounce((message) => {//     window.localStorage.clear()
//     Message({//       message,
//       type: 'error'
//     })
//   }, 1000)//   const resError = debounce((message) => {//     Message({//       message,
//       type: 'error'
//     })
//   }, 1000)
//   axios.interceptors.response.use(
//     response => {//       // console.log(response)
//       if (parseInt(response.data.code) === 104) {//         authError(response.data.msg)
//         window.sessionStorage.setItem('num',1)
//         router.push({//           path: '/login'
//         })
//       } else {//         return response.data
//       }
//     },error=>{//       console.log(error)
//       resError('服务器请求出错,请联系管理员')//     })
export default axios

api接口
我的是在api下的index.js 文件内部

import request from '@/api/axios.js'
function login(data){return request({url:'/search_item_list',method:'post',data})
}
function check_token(data){return request({url:"check/token",method:'post',data})
}export{login,check_token,}

前提：在程序内可以成功访问到线上线下后端接口数据

在Linux环境下 nginx 部署vue打包项目相关推荐

Linux环境下Nginx部署静态资源文件。
操作环境: 阿里云服务器: Centos7.4 已安装过nginx 准备好静态资源文件. 部署静态资源文件我把自己的静态资源文件放在了/usr/local/nginx/html下. dv文件夹中为静 ...
linux环境下编译部署php生产环境
linux环境下编译部署php生产环境版本控制 php:7.2.4 nginx:1.9.9 部分插件版本 xlswriter:1.3.3.2 redis:3.1.3 一.安装php 1.安装依赖(之 ...
Linux环境下Tomcat部署Solr4.x
Linux环境下Tomcat部署Solr 最近接手了公司搜索相关的业务,由于其使用的是Solr,故趁着周末自己鼓捣下; 由于业务上使用的是Solr4.2.0版本,因此在学习时,使用相对较老的版本Sol ...
Ubuntu配置Nginx部署Vue SPA项目
Ubuntu配置Nginx部署Vue SPA项目文章记录了部署Vue SPA项目后可从ip访问的过程,因域名访问需要备案暂未尝试,后续若实行亦会更新在此处. 系统为Ubuntu18.04. Ngin ...
Linux环境下——C语言聊天室项目
由于使用了多线程操作,客户端进入程序后请先随便注册一次用户后再进行使用. 本程序默认第一个用户即ID为1的用户为超级管理员. 由于线程阻塞,最后的踢人操作有阻塞,需要在被踢出在线链表后手动下线. 看了 ...
linux下Nginx部署前后端项目
Nginx 常用命令(Linux) cd/usr/local/nginx/sbin ./nginx //启动 ./nginx -s stop //停止 ./nginx -s quit //安全退出 . ...
Linux环境下nginx安装配置--淘宝Tengine
文章目录前言一.tengine是什么? 二.使用步骤 1.下载地址 2.解压 3.依赖安装 4.安装nginx 5.编译 6.启动 7.设置为系统服务 7.服务启动.停止.重启总结前言随着公 ...
mosquitto在Linux环境下的部署/安装/使用/测试
看了有三四天的的源码,(当然没怎么好好看了),突然发现对mosquitto的源码有了一点点感觉,于是在第五天决定在Linux环境下部署mosquitto. 使用传统源码安装步骤: 步骤1:http:/ ...
linux环境下如何部署war包及常用命令
linux环境下部署war包需要用到的一些命令 linux环境下部署war包测试工具常用的一些命令对于使用navicat或者workbench进行脚本测试的一些注意事项执行 linux环境下部署 ...

在Linux环境下 nginx 部署vue打包项目

在Linux环境下 nginx 部署vue打包项目相关推荐

最新文章

热门文章