nginx部署vue项目亲测版(提供vue.config、nginx等配置文件)
需要看过相关文章,懂vue打包等,其他文章都不是很清晰,有些也不好用,本人亲测总结windows下可用,linux需要自己装环境测试。
还有,如果重新打包后,要把nginx存储文件删除干净后再复制进去,不可直接复制替换部分,有坑!
vue相关文件(确定这三个地方)
//1.axios文件 确定访问后端所有接口都加这个路径(axios.create添加的)
baseURL:'/rest'
//2.router文件路由模式:不写,用默认的(应该不是history)
const createRouter = () =>new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes.concat(asyncRoutes)//静态路由添加动态路由,根据自己来
});
//3.vue.config.js文件 publickputh属性,本次部署模拟生产用的 ./
publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
nginx.conf文件(直接build vue后将dist内的文件放到了nginx/html下,记得备份原来nginx的)
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
error_page 404 index.html;
}
#和上面vue文件对应上,访问后端都加rest
location /rest {
#rewrite ^/rest/(.*) /$1 break;
proxy_pass http://localhost:8088;
#proxy_cookie_path / /rest;
proxy_redirect off;
#client_max_body_size 500m;
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}