一篇文章快速掌握Nginx部署前端项目 Nginx安装配置及部署都非常

发布时间：2023-02-17 12:21:21 所属栏目：Nginx 来源：互联网

导读：前言：之前在Linux系统中部署了后端项目，今天继续来给大家分享如何部署前端项目。涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器，在当今应用地非常广泛，特别是前后端分离的情况下。 Nginx

1.1打包会遇到的问题1：hbuilderX打包vue项目白屏问题
　　将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件

　　
　　build: {
　　    // assetsPublicPath: '/',//修改前
　　    assetsPublicPath: './',//修改后
　　}
　　1.2打包会遇到的问题2：hbuilderX打包项目，element-ui的icon图标无法正常显示

　　找到build文件的utils.js 中有打包的路径，看看generateLoaders();Extract CSS when that option is specified, 指定该选项时提取CSS发现少了个公共路径，加上pubilcPath

　　if (options.extract) {
　　     return ExtractTextPlugin.extract({
　　       use: loaders,
　　       fallback: 'vue-style-loader',
　　       // 解决icon路径加载错误
　　       publicPath:'../../'
　　     })
　　   } else {
　　     return ['vue-style-loader'].concat(loaders)
　　   }
　　2）做ip/host主机映射将虚拟机ip映射域名www.zking.com

　　方法：

　　C:WindowsSystem32driversetchosts中增加映射关系

　　192.168.26.128 www.zking.com

　　做了主机映射那么我们前端项目就要改变action.js更改配置：
　　'SERVER': 'http://www.zking.com/api/T216_SSH', //服务器，然后重新打包

　　3）Nginx配置更改代理配置/etc/nginx/conf.d

　　更改第一个：静态的资源加载以及域名

　　     listen       80;            #监听80端口，可以改成其他端口
　　    #server_name localhost;    #当前服务的域名
　　    server_name www.zking.com; #当前服务的域名(虚拟域名也可以)
　　    root         /usr/local/mypro/dist;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置;这里放到/usr/local/*，放到其他路径下会有权限相关问题；必要的时候配置Nginx.conf的user为root

　　更改第二个动静分离的区分：

　
　　location / {
　　        #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍
　　    try_files $uri $uri/ /index.html;
　　}
　　location ^~/api/ {
　　    #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/，则会把/api/*后面的路径直接拼接到后面，即移除api
　　    proxy_pass http://tomcat_list/;
　　}
　　4）重启Nginx更新配置

　　1
　　systemctl restart nginx
　　5）将前端构建好的dist项目，上传到云服务器/usr/local/...（只能放这里）

　　小编在这里就专门建一个文件夹来放置这个前台打包好的文件

　　mkdir mypro创建文件命令

　　6）www.zking.com完成整个前后端分离项目的测试

（编辑：甘南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5/5

首页