nginx部署vue前端打包项目

一、nginx安装

安装说明见:Nginx使用命令安装说明-CSDN博客

二、打包文件上传部署

将vue打包后的静态文件进行上传,打包后的目录如下:

将dist文件夹进行压缩为dist.zip,并将该目录打包上传至服务器的nginx目录: /usr/local/nginx/html,并使用unzip解压

解压文件:

复制代码
unzip dist.zip

三、配置nginx.cnf

修改nginx配置文件:/usr/local/nginx/conf/nginx.conf

将server部分替换为如下内容:

复制代码
server {
                # nginx启动监听的端口
        listen       8083;
                
        # 可以是localhost和可以是本机ip地址,如果要给公司其他同事的电脑可以访问,需要 配置为本机的ip地址
        server_name  192.168.110.112;


                # 配置页面中发送的请求代理到后端接口        
                location /demo/ {
                        # rewrite  ^.+api/?(.*)$ /$1/api break;
                        proxy_pass http://192.168.110.112:8081/demo/;     # 后端的请求接口
                }

                location / {
                        #程序根目录配置,也就是刚刚打包文件放置的目录
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
                        # 配置把所有匹配不到的路径重定向到index.html,vue-router的mode是history模式的情况下需要配置,否则会出现刷新页面404的情况
                        try_files $uri $uri/ /index.html;
                }
       
    }

里面的信息请酌情修改,其中8083就是前端的访问接口

四、启动nginx

nginx

五、访问页面

访问 http://192.168.110.112:8083 就可以访问前端页面啦!

六、注意事项

1.vite.config.js里面需要配置一个base值为./

2.main.js里面配置的后端ip需要将127.0.0.1修改为实际的ip,本例中为 192.168.110.112

相关推荐
牧羊狼的狼4 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常5 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip5 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C5 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件