使用Ngnix 发布并代理前端

一、开发阶段

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;
       }
       
    }