windows vue-cli打包用nginx部署详记

百度答案千千万，不行咱就换~   这是我部署vue-cli的过程记录，如有帮助到其他人，也很开心鸭

1.下载nginx  windows版本

http://nginx.org/en/download.html

1.1 nginx基础控制命令

start nginx    启动nginx

nginx -s reload    重新加载配置文件

nginx -s quit   退出nginx

nginx -s stop    停止nginx

是不是有人不知道怎么打开控制台(小白是真的白)~~~ 选中nginx文件夹目录，输入cmd，然后就可以使用上面的命令来控制项目启动、重载了  （nginx默认127.0.0.1    80端口，启动后在浏览器里输入 http://127.0.0.1看到welcome to nginx页面就代表nginx启动成功）

2.项目打包前注意事项

2.1 静态资源路径

看到网上很多人说这里要改成  ./   不过因为我没有放文件在assets文件夹里，而是放在了static文件夹内，所以这里不改也没有影响 

2.2 router路由配置

周知：路由的mode，使用 history是不加#访问，不使用就要加 # ,在nginx配置后是一样的访问路径

使用history模式，需要配置 base ,  如果你的地址访问路径是  www.baidu.com/manage/login  这种，有一个固定的manage不是路由里面配置的，就要写  /manage    ， 而我们通常是 www.baidu.com/login   就直接写  /

不用history模式就忽略这里吧，直接打包

3.vue-cli打包

npm run build   生成dist文件夹在项目根目录

4.修改nginx配置

location / {
            root   E:\project\insure-app\dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
		
location /auth {
			proxy_set_header X-Real-IP $remote_addr;
			proxy_pass http://192.168.1.239:1111; 
			proxy_redirect off;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Host $http_host;
			proxy_set_header X-NginX-Proxy true;
}