Vue打包部署至CentOS

环境准备

在开始之前，需要确保CentOS服务器上已经安装了Node.js和npm。Node.js是一个JavaScript运行环境，而npm则是Node.js的包管理工具。如果你的服务器上还没有安装，可以通过如下命令进行安装：

yum install -y nodejs npm

安装完成后，可以用以下命令来检查版本：

node -v
npm -v

Vue项目打包

在本地开发机器上，确保已经安装了Vue CLI工具。可以使用以下命令进行安装：

npm install -g @vue/cli

进入到项目目录，并运行以下命令来打包项目：

npm run build

运行成功后，dist目录下将生成打包后的静态文件。

上传打包文件至CentOS

可以通过scp命令或者其他文件传输工具将dist目录下的文件上传到CentOS服务器。假设要上传到服务器的/home目录，scp命令如下：

scp -r dist/ username@your_centos_server:/home

Nginx配置

在CentOS服务器上，可以使用Nginx来托管我们的Vue应用。首先，安装Nginx：

yum install -y nginx

安装完成后，配置Nginx。编辑/etc/nginx/nginx.conf文件或在/etc/nginx/conf.d目录下创建一个新的配置文件，如vue.conf。在server块中进行如下配置：

server {
    listen       80;
    server_name  your_domain_or_ip;

    location / {
        root   /home/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
        

这个配置意味着当访问域名或IP时，Nginx会从/home/dist目录加载文件。

启动Nginx服务

完成配置后，启动Nginx服务：

systemctl start nginx

并设置开机自启：

systemctl enable nginx

现在，你可以通过域名或者IP访问你的Vue应用了。

总结

完成了从本地打包Vue项目到CentOS服务器部署的全过程。通过合理配置Nginx，我们能够快速搭建一个稳定的前端应用托管环境。