将vue项目部署到nginx(windows和linux版)

注：linux的nginx本人使用的docker启动。

1.使用npm run build将vue项目打包成dist文件夹。

2.将dist文件夹复制到nginx的html目录下。（windows的html文件夹在根目录下，linux的html在/usr/share/nginx/目录下）

3.修改配置文件。

3.1 windows版本，在nginx.conf的http模块修改server信息，主要修改root，注意要用反斜杠，不能用全路径。

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           root   \html\dist;
           index  index.html index.htm;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header Host $host;
        }
}

3.2  linux版本，我个人使用的docker，所以路径不同，linux的路径可以写全路径，建议写全路径，用正斜杠，否则docker启动的html目录和非docker启动的路径不同，有可能导致html找不到。

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
           root   /usr/share/nginx/html/dist;
           index  index.html index.htm;
                   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header Host $host;
        }
}

4.重启nginx，即可访问。