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启动成功)

windows vue-cli打包用nginx部署详记_第1张图片

2.项目打包前注意事项

2.1 静态资源路径

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

windows vue-cli打包用nginx部署详记_第2张图片

2.2 router路由配置

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

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

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

windows vue-cli打包用nginx部署详记_第3张图片

3.vue-cli打包

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

4.修改nginx配置

windows vue-cli打包用nginx部署详记_第4张图片

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

 

你可能感兴趣的:(vue)