服务器环境:
电信服务器:有网环境,但是访问不了外网,只开放了几个特定的端口,可以进行mstsc远程(但必须外挂环境,你懂的),windows 2012 R2版本(因为Linux不太会,而且距机房太远,怕出问题)
系统:
1、springBoot后台,接口 9000
2、vue_admin_template项目,请求后台接口9000 本身接口8082(项目内已经配置完成,貌似是我自己想多了),打包就不讲了,按README.md说明来就行,但注意一点:
a、
将vue.config.js文件中的publicPath改变为
‘./’
,本身编辑器运行又需要改回
‘/’
部署:
1、
后台springboot后台项目没有讲的,直接java -jar启动(注意radis,我因为这个没有安装配置,耽误我好久)
2、
Vue项目就比较难了,因为是第1次部署前端Vue项目,开始使用的是Tomcat,直接修改端口号8082和根项目名称dist,将dist放到Tomcat中的webapps下就行了,但是只能显示页面,请求404,跨域,各种问题。各种报错,所以各种百度,最后发现还是得使用nginx,因为vue-admin-template项目中做了代理与转发。难就难在nginx的配置上面,贴代码
listen 8082;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/xx/xx/xx/xx/dist;
index index.html;
}
location /prod-api/ {
proxy_set_header Host $host:$server_port;
proxy_pass http://localhost:9000/;
}
nginx基本的应该会配置,重点在
location /prod-api/ {
proxy_set_header Host $host:$server_port;
proxy_pass http://localhost:9000/;
}
a、vue-admin-template的生产环境配置前添加了 “/prod-api”这个,所以location后面要添加 /prod-api/这个将这个进行转发
b、http://localhost:9000/,端口后面一定要添加/,不然也不会成功,我这个问题试了好久。
这样,vue项目里面配置的请求数据端口(9000)和请求项目端口(8082)也都没有用了,都必须在nginx配置了。
配置成功
总结:
第1次配置VUE项目,遇到了好多问题,写下来权当是自己的配置项目的总结,如果有不明白的话,可以评论或私信我。