Vue+vue-admin-template+nginx后台(Windows)部署

  • Post author:
  • Post category:vue


服务器环境:

电信服务器:有网环境,但是访问不了外网,只开放了几个特定的端口,可以进行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项目,遇到了好多问题,写下来权当是自己的配置项目的总结,如果有不明白的话,可以评论或私信我。



版权声明:本文为u011719228原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。