vue项目部署至linux的nginx服务器

1.修改vue项目下 config/index.js  中build  的 assetsPublicPath路径，改为   './'   (放入服务器正确加载静态文件)

2. 在控制台 npm run build  ,打包成功后，项目中会多出一个dist 文件夹

3.用上传工具（FileZilla等 ）将整个dist文件夹 上传至服务器指定路径 ，例如下图

4.配置nginx配置文件(Linux上已安装nginx)  nginx.conf ，如下图

配置文件如下

server {
    listen       80;
    server_name	www.gongsi.com;  #项目域名
   
	root /home/root/animalRoom/dist;  #vue项目打包后的dist

    location / {
        #需要指向下面的@router，否则会出现vue的路由在nginx中刷新出现404
        try_files $uri $uri/ @router;                    
        index index.html;
    }
       
	#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    location @router {           
      #因此需要rewrite到index.html中，然后交给路由再处理请求资源
		rewrite ^.*$ /index.html last;                   
	}      

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

5、nginx配置完成后，重新加载，命令如下

nginx -s reload

6、打开浏览器，直接输入域名就可以访问了