nginx部署vue

今天又是搞运维的一天，作为一个开发工程师，不仅要开发，还得操心部署的事，心好累。不会搞，咋办嘞。学习搞起！！！ （windows部署）

遇到的问题

• nginx非根目录部署vue
• 页面刷新404 www.cnblogs.com/vipzhou/p/9… （该链接很好的解决了上述两个问题，下文是对此次部署的总结和记录）

1.打包vue项目（使用npm命令）

npm run build   //在vue根目录下生成dist文件夹

因为在vue.config.js里配置了publicPath，所以打包路径都是在queue路径下的

module.exports = {
  publicPath: '/queue',
  lintOnSave: false,
  devServer: {
    proxy: {  //配置跨域
      '/api': {
        target:'http://localhost:8083/proServer/',
        changOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：
          '^/api': ''
        }
      },
    }
  }
}

这样一来该打包项目在nginx下部署就不再根目录下了，将dist文件复制到nginx目录下的html文件夹，并重命名queue，配置nginx.conf如下（nginx中#的作用：注释代码）：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8888;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        
        location /queue/{
            root   html;
            index  index.html index.htm;
			try_files $uri $uri/ @router;
        }
		
		
		
		#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^/(queue)/(.+)$ /$1/index.html last;
        }
		
		location /queueServer-check/{
		     proxy_pass http://localhost:8083/proServer/;
        }
 
    }



}

nginx模块解释

//应用入口，指向index.html文件
      location /queue/{
            root   html;
            index  index.html index.htm;
			try_files $uri $uri/ @router;
        }
        //解决刷新报404的问题
        //对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        //因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^/(queue)/(.+)$ /$1/index.html last;
        }

反向代理的后台地址

       //queueServer-check接口定义的访问名称
        location /queueServer-check/{
		     proxy_pass http://localhost:8083/proServer/;
        }