vue项目部署至linux的nginx服务器
1.修改vue项目下 config/index.js 中build 的assetsPublicPath路径,改为 './' (放入服务器正确加载静态文件)2.在控制台 npm run build ,打包成功后,项目中会多出一个dist文件夹3.用上传工具(FileZilla等 )将整个dist文件夹上传至服务器指定路径 ,例如下图4.配置nginx配置...
·
1.修改vue项目下 config/index.js 中build 的 assetsPublicPath路径,改为 './' (放入服务器正确加载静态文件)
2. 在控制台 npm run build ,打包成功后,项目中会多出一个dist 文件夹
3.用上传工具(FileZilla等 )将整个dist文件夹 上传至服务器指定路径 ,例如下图
4.配置nginx配置文件(Linux上已安装nginx) nginx.conf ,如下图
配置文件如下
server {
listen 80;
server_name www.gongsi.com; #项目域名
root /home/root/animalRoom/dist; #vue项目打包后的dist
location / {
#需要指向下面的@router,否则会出现vue的路由在nginx中刷新出现404
try_files $uri $uri/ @router;
index index.html;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
location @router {
#因此需要rewrite到index.html中,然后交给路由再处理请求资源
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
5、nginx配置完成后,重新加载,命令如下
nginx -s reload
6、打开浏览器,直接输入域名就可以访问了
更多推荐
已为社区贡献7条内容
所有评论(0)