百度答案千千万,不行咱就换~ 这是我部署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;
}