Vue项目打包部署到服务器

一、安装Node.js和Vue-cli

Node.js是一个开源的、跨平台的JavaScript运行环境，用于编写服务器端应用程序。Vue-cli是Vue.js官方提供的一个脚手架工具，可以更方便地进行Vue项目的搭建、编译和调试。

1、安装Node.js：

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

2、安装Vue-cli：

npm install -g vue-cli

二、创建Vue项目

1、使用Vue-cli创建一个基本的Vue项目：

vue init webpack my-project

其中，my-project是你的项目名称。

2、进入项目目录，在终端中输入以下命令启动项目：

cd my-project
npm install
npm run dev

这时候你会看到一个欢迎页面，表示项目创建和启动成功。

三、打包Vue项目

1、在项目目录下输入以下命令进行打包：

npm run build

打包成功后，可以在项目的 /dist 目录下找到打包后的文件。

四、部署Vue项目到服务器

1、在服务器上安装Nginx：

sudo apt-get update
sudo apt-get install nginx

2、配置Nginx：

在 /etc/nginx/sites-available 目录下创建一个新的配置文件，例如 my-project.conf，内容如下：

server {
    listen 80;
    server_name your-domain.com; # 替换为你的域名

    location / {
        root /path/to/my-project/dist; # 替换为你的项目路径
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

3、启动Nginx：

sudo service nginx start

现在你就可以通过你的域名访问你的Vue项目了。

五、使用PM2进行进程管理

如果你的Vue项目需要长时间运行或者需要在服务器上运行多个项目，建议使用PM2进行进程管理。

1、全局安装PM2：

sudo npm install -g pm2

2、启动项目：

pm2 start /path/to/my-project/dist/index.js --name my-project

其中，my-project是你的项目名称。

3、其他常用命令：

pm2 list # 列出所有运行的进程
pm2 stop all # 停止所有进程
pm2 restart my-project # 重启 my-project 进程
pm2 delete my-project # 删除 my-project 进程

六、结语

以上就是使用Vue-cli创建、打包、部署Vue项目的完整流程。当然，在实际操作中还有许多细节需要注意，比如安全性、性能优化等等，这些内容可以根据具体情况进行深入研究。