nginx部署vue项目

雅俗共赏zyyyyyy

已于 2022-07-27 17:38:49 修改

阅读量624

点赞数 1

分类专栏：中间件相关文章标签： nginx vue.js 前端

于 2022-07-27 17:35:19 首次发布

本文链接：https://blog.csdn.net/qq_36933421/article/details/126019612

版权

Vue打包 Nginx配置 dist文件夹 proxy_pass try_files

关键词由CSDN通过智能技术生成

中间件相关专栏收录该内容

17 篇文章 1 订阅

订阅专栏

先将vue项目打包，打包命令npm run build，如果该命令报错Error: missing script: build，去查看package.json文件scripts块中指定了打包配置，使用npm run build:prod冒号后面的内容对应你配置文件的前缀，例如我的
在这里插入图片描述
打包完成后，会生成一个dist文件夹，将dist文件夹上传到nginx的html目录下，然后修改nginx.conf配置，配置如下：

server {
        #web服务监听端口
        listen       8050;
        charset utf-8;
        location / {
            #dist包的路径
              root /aifs01/app/tools/nginx/html/dist;
              #防止刷新404
              try_files $uri $uri/ /index.html;
        }  
       #对应的后端服务地址，目前写的我本地服务，后续对应服务器地址即可
        location /ops/{
              proxy_pass 1.1.1.1:1111;
        }
}

配置修改完毕后，重启nginx，进入sbin目录，输入命令./nginx -s reload即可，访问方式：服务器ip+监听端口，访问即可。