在Linux服务器上部署vue项目

部署vue项目到Linux服务器上主要需要完成以下几个步骤：

1. 在本地使用npm等工具完成vue项目构建
2. 将构建好的项目文件上传至Linux服务器
3. 在Linux服务器上安装Nginx等Web服务器，并配置Web服务器
4. 将上传的项目文件部署到Web服务器上
5. 启动Web服务器，访问部署在服务器上的vue项目

下面，我将详细讲解每个步骤的具体操作流程：

1. 在本地构建vue项目

在本地使用命令行工具进入项目文件夹，并使用以下命令安装项目依赖：

npm install

在本地运行以下命令进行构建：

npm run build

该命令将会在/dist目录下生成构建好的静态资源文件。

2. 将构建好的项目文件上传至Linux服务器

使用scp命令将构建好的项目文件上传至Linux服务器：

scp -r /path/to/dist user@remote:/path/to/webserver/root/

其中，/path/to/dist为构建好的静态资源文件所在的本地路径，user@remote:/path/to/webserver/root/为Linux服务器上Web服务器的根目录的路径。

3. 在Linux服务器上安装Nginx等Web服务器

使用以下命令在Linux服务器上安装Nginx：

sudo apt-get update
sudo apt-get install nginx

4. 配置Nginx服务器

使用以下命令打开Nginx配置文件：

sudo nano /etc/nginx/nginx.conf

在文件中找到以下配置项：

http {
    ...

    server {
        listen       80;
        server_name  localhost;

        ...

    }
}

将其中的server_name修改为你的服务器IP地址或者域名。然后在server标签内部新增以下配置项：

location / {
    root   /path/to/webserver/root/;
    index  index.html;
    try_files $uri $uri/ /index.html;
}

其中，/path/to/webserver/root/为Web服务器的根目录，index.html为vue项目的入口文件。这里使用了try_files来解决浏览器端刷新页面时出现404错误的问题。

保存并退出Nginx配置文件后，使用以下命令重启Nginx服务器：

sudo service nginx restart

5. 启动Web服务器并访问部署在服务器上的vue项目

通过以上配置，vue项目已经成功部署在了Linux服务器上。可以使用systemctl的方式启动Web服务器：

sudo systemctl start nginx

打开浏览器，输入http://服务器IP地址，即可访问部署在服务器上的vue项目。

示例1：

假设本地构建好的项目文件夹为/Users/john/project/dist，Linux服务器IP地址为192.168.1.10，Web服务器根目录为/var/www/html/。

使用以下命令将构建好的项目文件上传至服务器：

scp -r /Users/john/project/dist root@192.168.1.10:/var/www/html/

然后，在Linux服务器上进行Nginx配置。

示例2:

假设本地构建好的项目文件夹为/Users/john/project/dist，Linux服务器的域名为example.com，Web服务器根目录为/var/www/html/。

使用以下命令将构建好的项目文件上传至服务器：

scp -r /Users/john/project/dist [e-mail]:/var/www/html/

然后，在Linux服务器上进行Nginx配置。