2022-07-17 vue项目-通用后台管理系统(十三) 将vue项目部署到nginx服务器上,宝塔面板介绍和使用

原创已于 2023-03-30 20:05:58 修改 · 603 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #vue #宝塔面板 #nginx #前后端交互

于 2022-07-17 23:52:30 首次发布

知识点同时被 2 个专栏收录

96 篇文章

订阅专栏

vue项目-通用后台管理系统

13 篇文章

订阅专栏

本文介绍了如何将Vue项目打包并部署到Nginx服务器，特别是针对window环境的操作步骤，包括项目打包、将dist文件复制到Nginx的HTML文件夹、启动Nginx服务器以及配置nginx.conf。此外，还详细讲解了如何使用宝塔面板进行服务器管理和Vue项目部署，包括宝塔面板的下载、安装、登录以及选择安装套件。

文章目录

一.vue项目打包并部署到nginx服务器(window环境)

1.项目打包

对于通过vue-cli脚手架创建的项目

(*还有通过webpack创建的vue项目)
在项目的vue.config.js中补充如下代码:

    assetsDir: 'static',
    parallel: false,
    publicPath: './',

在根目录cmd,并输入打包命令

在项目根目录中cmd,然后输入命令:npm run build
生成dist文件夹
打包前:crm文件夹 158Mb
打包后:dist文件夹 6.4Mb

2.nginx的html文件夹下粘贴打包好的项目文件

在这里插入图片描述

3.在有nginx.exe的页面cmd,输入命令开启服务器

在这里插入图片描述
输入命令:start nginx,
打开浏览器,在地址栏输入localhost,出现以下界面即为开启成功

4.配置nginx.conf

把dist文件中的文件粘贴到HTML文件夹下面

但不要包含它们的父文件夹dist本身,这样做的好处是:可以不用进行Nginx配置

配置nginx

如果非要配置,可以使用NodePad++打开nginx.conf文件进行相关配置
在这里插入图片描述
一般是修改默认端口号,以及修改root文件夹的地址:

#.......其他部分省略
 server {
		#listen		  80;#默认端口是80，如果端口没被占用可以不用修改
        listen       8888;#改成localhost:8888
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root		html#默认,但也可以改成绝对路径,特别是把dist这个父文件夹给粘贴进html中时
        #root        D:/nginx-1.22.1/html/dist;#vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }
}