vue配置 使用nginx
从官网下载nginx 放置在D盘或其他盘中 使用nginx1.18.0版本
进入conf目录配置nginx.conf文件
这里使用nginx的proxy_pass 代理
在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。
假设下面四种情况分别用 http://192.168.1.1/proxy/test.html 进行访问。
第一种：
location /proxy/ {
proxy_pass http://127.0.0.1/;
}
代理到URL：http://127.0.0.1/test.html
第二种（相对于第一种，最后少一个 / ）
location /proxy/ {
proxy_pass http://127.0.0.1;
}
代理到URL：http://127.0.0.1/proxy/test.html
第三种：
location /proxy/ {
proxy_pass http://127.0.0.1/aaa/;
}
代理到URL：http://127.0.0.1/aaa/test.html
我这里使用的/api方式 对应下方vue配置中的env.js
端口设置
我起了两个端口 80端口对应相应的页面 8082端口对应管理端 80端口映射到公网ip 8082对应私网访问
server {
listen 80;
server_name localhost1;
location / {
root html;
index index.html index.htm;
}
location /api/ {
proxy_pass http://127.0.0.1:5001/; //你的后端端口号
}
}
server {
listen 8082;
server_name localhost2;
location / {
root admin;
index index.html index.htm;
}
location /api/ {
proxy_pass http://127.0.0.1:5001/; //你的后端端口号
}
}
vue配置 对应nginx中proxy_pass设置的/api
env.js 配置proxy_pass
/**
* 配置编译环境和线上环境之间的切换
*
* baseUrl: 域名地址
* routerMode: 路由模式
* baseImgPath: 图片存放地址
*
*/
let baseUrl = '';
let routerMode = 'hash';
let baseImgPath;
if (process.env.NODE_ENV === 'development') {
baseUrl = 'http://127.0.0.1:5001';
}else{
baseUrl = '/api';
}
export {
baseUrl,
routerMode,
baseImgPath
}
对应使用 fetch.js
import {
baseUrl } from './env'
export default async(url = '', data = {
}, type = 'GET', method = 'fetch') => {
type = type.toUpperCase();
url = baseUrl + url;
console.log(url);
console.log(data);
if (type === 'GET'||type === 'DELETE') {
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
});
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
console.log('url'+url);
}
// 对于支持fetch方法的浏览器，处理如下：
if (window.fetch && method === 'fetch') {
// console.log('fetch');
let requestConfig;
requestConfig = {
// credentials: 'include',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
mode: "cors",
cache: "no-cache"
};
if (type === 'POST'||type==='PUT') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
}
// 对于不支持fetch的浏览器，便自动使用 ajax + promise
else {
console.log('not fetch');
return new Promise((resolve, reject) => {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
// requestObj = new ActiveXObject;
}
let sendData = '';
if (type === 'POST'||type==='PUT') {
sendData = JSON.stringify(data);
}
requestObj.open(type, url, true);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState === 4) {
if (requestObj.status === 200||requestObj.status === 14) {
let obj = requestObj.response;
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
resolve(obj)
} else {
reject(requestObj)
}
}
}
})
}
}
python后端编写与部署
逻辑编写这里不再复述 可以看我python后端的相关文章
由于windows服务器python不能像linux一样一直在后端运行，所以我这边直接命令行运行着了（稍有不妥）
python xxx.py
使用此命令运行即可
服务器端口放行
最后是要把windows的服务器 入站规则加上你nginx配置的端口 我这里是80端口和8082端口
如图加入入站规则 新建规则加入即可
转载：https://blog.csdn.net/youtiankeng/article/details/116035028
查看评论