项目部署处理方案

# 项目构建过程分析与实现

为什么需要打包项目？
打包之后项目可以通过浏览器直接访问吗？
为什么需要有服务？

为什么需要打包项目：

浏览器只能识别并运行 html、css、js 文件 。

那么换句话而言，项目中的 .vue 文件，浏览器是不认识的。

而打包的过程就是把 .vue 的 单文件组件 打包成 html、css、js 的文件，让浏览器进行识别，并展示我们的项目

打包之后项目可以通过浏览器直接访问吗？

我们可以测试一下。

通过 npm run build 打包项目之后，打包的文件会被放入到 dist 文件夹中，其实我们可以直接双击 index.html 文件，可以发现，浏览器是无法显示项目的。

打开 F12 可以发现，终端中抛出了很多的错误。

那么根据这些错误可以知道，无法显示的原因是因为 一些文件找不到了。

查看我们的 url 可以发现，其实我们的 url 是一个 file 协议。那么对应的文件路径就会编程 盘符下的 xxx ，在我们当前的盘符下没有对应的文件，那么自然是无法找到的。

而想要解决这个问题的话，就需要把我们的项目运行到一个服务中，就像我们开发时的 devServer (opens new window) 一样。

为什么需要有服务？

明确了上面的问题之后，为什么要有服务就比较好理解了。

我们需要通过一个服务托管我们的项目，从而避免出现模块无法被找到等问题。

那么明确好了，以上问题之后，接下来我们就可以打包我们的项目，并且把项目部署到服务器之中。

我们可以通过 npm run build 打包项目，打包好项目之后，接下来我们再来看如何到服务器中部署我们的服务。

# 域名、DNS、公网IP、服务器、Nginx之间的关系

基本概念：

域名：https://imooc-admin.lgdsunday.club
DNS：域名解析服务器
公网IP：服务器在网络中的唯一地址
服务器：服务部署的电脑
Nginx：网页服务

# 阿里云服务器购买指南

云服务器 ECS 自定义购买 (opens new window)

# 服务器连接方式

常见的连接服务器的方式有三种：

阿里云控制台中进行远程链接
通过 SSH 工具（XShell (opens new window)）
SSH 指令远程登录

# Nginx 环境处理

nginx 编译时依赖 gcc 环境
```
yum -y install gcc gcc-c++
```
1
安装 prce，让 nginx 支持重写功能
```
yum -y install pcre*
```
1
安装 zlib，nginx 使用 zlib 对 http 包内容进行 gzip 压缩
```
yum -y install zlib zlib-devel 
```
1
安装 openssl，用于通讯加密
```
yum -y install openssl openssl-devel
```
1
进行 nginx 安装
创建 nginx 文件夹

下载 nginx 压缩包

wget https://nginx.org/download/nginx-1.11.5.tar.gz

解压 nginx
```
tar -zxvf  nginx-1.11.5.tar.gz
```
1
进入 nginx-1.11.5 目录
```
cd nginx-1.11.5
```
1
检查平台安装环境
```
./configure --prefix=/usr/local/nginx
```
1
进行源码编译
```
make 
```
1
安装 nginx
```
make install
```
1
查看 nginx 配置
```
/usr/local/nginx/sbin/nginx -t
```
1
制作 nginx 软连接
进入 usr/bin 目录
```
cd /usr/bin
```
1

制作软连接

ln -s /usr/local/nginx/sbin/nginx nginx

接下来制作配置文件
首先进入到 nginx 的默认配置文件中
```
vim /usr/local/nginx/conf/nginx.conf
```
1
在最底部增加配置项（按下 i 进入输入模式）
```
include /nginx/*.conf;
```
1
按下 esc 键，通过 :wq! 保存并退出
创建新的配置文件
```
touch /nginx/nginx.conf
```
1
进入到 /root/nginx/nginx.conf 文件
```
vim /nginx/nginx.conf
```
1

写入如下配置

# imooc-admin
server {
    # 端口
    listen       80;
    # 域名
    server_name  localhost;
    # 资源地址
    root   /nginx/dist/;
    # 目录浏览
    autoindex on;
    # 缓存处理
    add_header Cache-Control "no-cache, must-revalidate";
    # 请求配置
    location / {
        # 跨域
        add_header Access-Control-Allow-Origin *;
        # 返回 index.html
        try_files $uri $uri/ /index.html;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

通过 :wq! 保存退出
在 root/nginx 中创建 dist 文件夹
```
mkdir /nginx/dist
```
1
在 nginx/dist 中写入 index.html 进行测试
通过 nginx -s reload 重启服务
在浏览器中通过，IP 测试访问

# 项目发布

可以通过 XFTP (opens new window) 进行数据传输

# 总结

本章节主要讲解了一些基础的部署相关的知识，这些内容并不复杂，属于通用性内容。

上次更新: 2025/11/15, 15:21:19

← 富文本和markdown处理方案可视化处理方案→