月份：2023年06月

VUE基于nginx的快速部署教程

在部署前，服务器应配置好nginx，见Ubuntu部署nginX

编写好的VUE代码，可以在本地编译（编译好后将dist文件通过FTP上传服务器），也可以在服务器端进行编译（服务器安装node.js进行编译）。

如果本地编译，直接

npm run build

当提示”built in x.xx s“后即为编译成功，结果文件存于当前目录的dist文件夹内。

使用MobaXterm或者Xshell之类的软件连接到服务器，通过FTP将dist文件上传到设置的目录即可，比如“/etc/nginx/html/”，应注意需要nginx有足够的文件权限访问上传的文件。

如果在服务器编译，需要服务器安装node.js和npm

sudo apt install nodejs npm
// 由于apt中的node.js版本较老，还需要通过npm升级版本
npm install n -g
sudo n stable
hash -r

然后通过FTP或者git将源码放到服务器中，在源码目录中执行

npm run build

然后把编译好的dist文件移动到设置的目录就可以了。

Ubuntu部署nginX

通过APT安装nginx

sudo apt update
sudo apt upgrade
sudo apt install nginx

编辑nginx的配置文件

//nginx配置的主文件
sudo vim /etc/nginx/nginx.conf
//nginx.conf默认引用了/etc/nginx/conf.d/中的所有.conf文件，所以建议以在conf.d中添加文件的形式添加web服务配置
sudo vim /etc/nginx/conf.d/vm.conf

以基本的web服务为例，vm.conf的配置内容可以是：

server {

    # 使用的端口，及是否作为默认服务
    listen    16666 default_server;

    # 服务器名称，同一个IP的同一个端口可以设置为不同的域名，nginx可以根据用户访问的域名的不同      提供不同的网站服务。
    server_name yttj.f3322.net:16666;

    # 文件的位置
    location / {

        # 文件根目录
        root     /usr/share/nginx/html;

        # 主页文件名
        index    index.html;
    }
}

配置完成后，即可启动nginx

sudo systemctl start nginx
#启用开机自动启动
sudo systemctl enable nginx

Ubuntu的防火墙默认开启，还应设置防火墙开放服务的端口

sudo ufw allow 16666