在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环境下部署 ...
最新文章
- Coding-数组(Array)
- version robot
- form表单 无法提交js动态添加的表单元素问题。。
- 使用C#体验函数式编程之——Partial application(局部应用)
- 前端路由跳转丢失端口号_如何在应用架构中设计微前端方案 icestark
- 找出js里面改变cookies的代码
- Getting started with Processing 第七章总结
- 将文件夹内的所有文件重命名(从1开始发番)
- 《啊哈算法》的Java实现| 第五章:图
- 4G标准之争,攘外须先安内
- 如何通过Spring Boot实施Alexa技能
- cpolar内网穿透工具
- 利用Md2all的自定义CSS,给Markdown一个漂亮的排版
- 重启计算机后ip丢失,win10系统重启后ip丢失的处理步骤
- 【计算机网络】第一章--计算机网络概述
- 【JS】【19】使用Jquery判断是电脑或手机或微信浏览器访问
- Python动态爬虫爬取京东商品评论
- Linux查看目录结构
- html在浏览器显示图片,html - 在所有Web浏览器中显示TIFF图像
- 2018.6.25课堂笔记