一、开发阶段
vue使用axios请求时,在开发阶段,可以通过配置vue.config.js文件来实现代理,解决跨域问题:
// axios设置接口路径,某些时候,需要给接口添加统一标识
let url = process.env.NODE_ENV === 'development' ? 'http://本机ip:9090' : 'http://本机ip:9091'
url = url + '/myweb' //接口统一添加标识
//vue.config.js
devServer: {
overlay: { // 让浏览器 overlay 同时显示警告和错误
warnings: false,
errors: false
},
host: "0.0.0.0",
port: 9090, // 端口号
https: false, // https:{type:Boolean}
open: false, // 配置自动启动浏览器
hotOnly: true, // 热更新
// proxy: 'http://后台ip:8082' // 配置跨域处理,只有一个代理时
proxy: { // 配置多个跨域
"/myweb": {
target: "http://后台ip:8082",
changeOrigin: true,
// ws: true,//websocket支持
secure: false,
pathRewrite: { //将/myweb替换为"",因为后台接口中其实并没有这个字符串
"^/myweb": ""
}
},
}
},
二、生产阶段
生产阶段则使用Ngnix来发布和代理前端最为简单便捷,
我一般在自己的windows电脑上部署测试项目,很方便快捷,局域网可用就够了
1、相关脚本
1.1 启动Ngnix
创建.bat脚本文件
E:
cd "E:\nginx-1.22.0"
nginx.exe
1.2 停止Ngnix
创建.bat脚本文件
E:
cd "E:\nginx-1.22.0"
nginx.exe -s stop
1.3 重启Ngnix
创建.bat脚本文件。注意:每次修改nginx.conf文件后,都需要重启Ngnix才能使用
E:
cd "E:\nginx-1.22.0"
nginx.exe -s reload
2、nginx.conf配置
打开nginx.conf,在http对象中添加你的server服务:
# 你的web端系统
server {
# nginx启动监听的端口
listen 9091;
# 可以是localhost,可以是本机ip地址,如果要给公司其他同事的电脑访问,需要配置为本机的ip地址
server_name 192.168.0.123;
# 解决Failed to load resource: the server responded with a status of 413 (Request Entity Too Large)
client_max_body_size 100M;
location @router {
# Vue项目路由不是真实存在的,所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
rewrite ^.*$ /index.html permanent;
};
# 配置页面中的请求代理的后台地址
location /myweb/ {
# 需要代理访问的后端服务器地址
proxy_pass http://后台ip:9098;
# 重写路由地址,将/myweb替换为空,因为后台接口没有,这是我们自定义的标识
rewrite ^/myweb(.*)$ $1 break;
}
location / {
# 程序根目录配置,也就是刚刚打包文件放置的目录,npm run build生成的dist文件地址
root G:\myTestProject\dist;
index index.html index.htm;
# 配置把所有匹配不到的路径重定向到index.html,vue-router的mode是history模式的情况下需要配置,否则会出现刷新页面404的情况
try_files $uri $uri/ /index.html;
}
}