vue前端项目打包并且在Linux服务器上部署过程（vue-admin-template-master）

最新推荐文章于 2024-08-03 14:32:15 发布

置顶摆渡人一直都在

最新推荐文章于 2024-08-03 14:32:15 发布

阅读量5.6w

点赞数 56

分类专栏： vue 文章标签： vue html linux nginx

本文链接：https://blog.csdn.net/qq_33661804/article/details/85340697

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、vue前端项目打包过程

1.vscode前端开发工具简介
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。
我们的前端项目主要是在vscode中进行开发，项目的整体目录结构如下：
在这里插入图片描述

2.在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。
如图所示：
在这里插入图片描述
配置代码如下：
SERVICE_API: ‘“http://10.118.1.127:9101”’,
BASE_API: ‘“http://10.118.1.127:9103”’
3.修改路由router，否则地址访问会出错
module.exports = file => () => import(’@/views’ + file + ‘.vue’)
项目结构图如下：
在这里插入图片描述
4.在终端输入npm run build
之后会自动生成一个dit文件夹，这就是我们打包后所需要的项目文件，放到服务器上，路径要与nginx配置路径一致（之后具体讲解）

二、Linux服务器上安装nginx并且进行相关配置

1.nginx简介
Nginx（发音同 engine x）是一款轻量级的Web 服务器／反向代理服务器及电子邮件（IMAP/POP3）代理服务器，并在一个BSD-like 协议下发行。我们可以将我们打包好的前端项目通过nginx代理去访问。
2.在linux上安装nginx以及常用命令符
下载：

#wget http://nginx.org/download/nginx-1.13.6.tar.gz

解压缩

#tar -zvxf nginx-1.13.6.tar.gz
#cd nginx-1.13.6

安装：

#./configure --with-http_ssl_module --with-http_gzip_static_module
#make
#make install

启动程序：

#cd /usr/local/nginx/sbin/
#./nginx

查看运行状态：

#ps aux | grep nginx

3.nginx前端项目代理地址配置
在/usr/local/nginx/conf目录下配置nginx.conf文件只要修改root即可，（root为项目打包后文件的存放路径。）
修改配置代码如下：

server {
        listen       9104;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /home/kaifa01/purchase/web/dist;
            index  index.html index.htm;
        }
        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;
        #error_page  404              /404.html;
   
}

4.conf配置文件的启动
在实际当中服务器中可能有多个vue前端项目，此时我们只要单独修该conf文件即可，一个前端项目对应的一个conf文件。
conf启动命令符如下：
启动项目指定配置文件 #cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf
查看启动进程： #ps -ef|grep nginx_hwfm
杀掉进程： kill -9 进程号
如图所示
在这里插入图片描述
5.nginx其它常用命令
(1)启动nginx:

#cd /usr/local/nginx/sbin/
#./nginx

(2)查看运行状态

 ps aux | grep nginx

（3）停止nginx

./nginx –s stop

(5)检查配置文件是否正确

./nginx –t

(7)查看nginx版本

$ ./nginx -v

(8）配置文件位置

/usr/local/nginx/conf/nginx.conf

6.拓展（window下nginx启动命令）

cd MyDownloads\nginx-1.15.3
start nginx
nginx -s stop
nginx -s reload

三、在Linux服务器上进行项目部署过程

1.安装 xshell 、xftp软件
Xshell功能简介
Xshell [1] 是一个强大的安全终端模拟软件，它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。Xshell 通过互联网到远程主机的安全连接以及它创新性的设计和特色帮助用户在复杂的网络环境中享受他们的工作。
Xshell可以在Windows界面下用来访问远端不同系统下的服务器，从而比较好的达到远程控制终端的目的。除此之外，其还有丰富的外观配色方案以及样式选择。
Xftp 功能简介
是一个基于 MS windows 平台的功能强大的SFTP、FTP 文件传输软件。使用了 Xftp 以后，MS windows 用户能安全地在 UNIX/Linux 和 Windows PC 之间传输文件。Xftp 能同时适应初级用户和高级用户的需要。它采用了标准的 Windows 风格的向导，它简单的界面能与其他 Windows 应用程序紧密地协同工作，此外它还为高级用户提供了众多强劲的功能特性。
2.通过安装以上两个软件可以实现window电脑远程控制Linux服务器，这样就可以将我们打包好的dist文件传输到Linux服务器上进行项目的部署(地址要与nginx当中的conf配置文件下的root地址一致)。项目存放结构图如下：
在这里插入图片描述
3.将dist文件传输上去，我们只需启动一次conf文件即可，在之后的重新部署过程当中，只需要替换dist打包文件即可，不需要重新启动nginx,(是不是感觉nginx很强大啊)
4.至此前端vue项目已经部署成功，但是不要高兴的太早Linux上防火墙默认是开的，我们需要开放我们的项目端口号，这样我们就可以在任何一台电脑上访问我们的前端项目了。