Vue.js分环境打包到部署-并用nginx代理请求后端接口
1.Vue.js分环境打包
vue.js分环境打包(vue-cli2.0),主要应对开发环境和生产环境请求后端地址ip不同,避免每次打包需要反复修改baseUrl的问题,根据npm run dev / npm build 打包生成不同baseUrl 配置。
打开config目录
分别修改以下两个文件如下:
dev.env.js 开发环境
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', VN_CONFIG: '"dev"', API_ROOT: '"//192.168.2.2:8080"' })
prod.env.js 生产环境
'use strict' module.exports = { NODE_ENV: '"production"', //添加 API_ROOT: '"//12.35.35:80"' }
[注:此处ip不可用][1].
在开发的过程中在使用axios的文件下使用
axios.defaults.baseURL = process.env.API_ROOT;
这样在调用接口时就可以直接写成这样,不用重复的在前面拼上baseURL了
getInfoDetailFn(eventId){ return fetch(`/api/v1/events/${eventId}/detail`) },
[注:在开发过程中都会将axios进行封装,接口请求统一管理,这样就不需要反复的引用][4]
2.nginx 代理请求后端接口
在实际的应用场景中,在生产环境下,前端大多使用nginx作为静态资源服务器.
现在有这样一个需求,前端代码打包成功好以后,直接扔到nginx上项目任然可以正常运行,无需配置baseURL,让nginx代理发送请求。
同样打开config目录下prod.env.js
'use strict' module.exports = { NODE_ENV: '"production"', //添加 API_ROOT: '""' }
我们将API_ROOT对应的ip删除,这样我们打包成功之后的代码放到nginx上。
比如:nginx地址为[localhost:3000][4],因为我们将生产环境下baseURL删除并未配置,这时当我们请求接口时将为这样
这样我们就可以通过简单配置下nginx 拦截这样的请求,为我们做一次代理,请求正真的后端地址。
安装nginx点击这里下载安装
进入nginx安装目录下 => conf 打开 nginx.conf文件(nginx配置文件)
新增配置
server { listen 9090; # nginx监听端口 root D:/source/dist; # vue.js前端代码打包存放目录 location = /login.htm { # 后端接口不以api开头需单独配置拦截代理 proxy_pass http://192.168.1.5:8080/login.htm; } location ^~ /api/ { #以api开头的接口统一拦截代理 proxy_pass http://192.168.1.5:8080; } }
[注:#号后为注释]
这样我们就完成了利用nginx代理发送请求了。
3.但是我们仔细测试发现还有个问题,就是我们刷新页面后发现会出现404找不到资源
造成这样的原因是,Vue项目是一个单页应用,vue-router 是根据网址的不同动态的用js渲染页面,比如我们在项目中这样一个目录下刷新 [localhost:3000/test] 其实在我们正真的资源目录下并不存在这样一个目录,这也就是导致刷新后404的原因
因此需要rewrite到index.html中,然后交给路由在处理请求资源
具体配置如下(在上面的配置中添加)
server { listen 9090; root D:/source/dist; location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } location /images/ { proxy_pass http://10.5.0.143/images/; } location = /login.htm { proxy_pass http://10.5.6.54:8080/login.htm; } location ^~ /api/ { proxy_pass http://10.5.6.54:8080; } }
这样我们就解决了刷新404的问题,nginx 还有很多配置,允许跨域等等,本人也是近期接触这个,代码虽然不多但挺实用的。
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
- nginx之proxy_pass代理后端https请求完全拆解
- Linux+Apache+Nginx+MySQL+PHP 前后端 部署 生产环境
- Linux+Apache+Nginx+MySQL+PHP 前后端 部署 生产环境
- vue项目打包部署_nginx代理访问方法详解
- NGINX生产环境反向代理到后端tomcat配置
- nginx在linux系统下的安装部署,以及反向代理https请求协议,ssl证书的生成,负载均衡tomcat服务器!
- 使用ansible结合keepalived高可用,nginx反向代理部署小型企业环境
- Nginx实现ssl一级、二级域名证书部署并用https访问代理转发服务器
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- 解决vue本地环境跨域请求正常,版本打包后跨域代理不起作用,请求不到数据的方法
- Tomcat学习总结(8)——Tomcat+Nginx集群解决均衡负载及生产环境热部署
- 服务器部署springboot打包后的jar(服务器多JDK环境)----jdk1.8
- Nginx 反向代理配合Tomcat部署web项目
- ceonts6.8 nginx做前端代理apache做后端服务架构配置
- GO 语言博客 搬家部署,NGINX作为代理
- nginx反向代理到tomcat,并在request中获取客户端请求ip
- 高性能Web服务器Nginx的配置与部署研究(3)Nginx请求处理机制
- Nginx的配置与部署(3)Nginx请求处理机制