阿里云服务器vue项目部署

luotuoemo • 2023年9月30日 12:07 • 阿里云 • 阅读 395

阿里云服务器上部署Vue项目需要以下步骤：

登录阿里云服务器：使用SSH工具（如Putty）通过服务器的IP地址和管理员账户进行登录。
安装Node.js：在服务器上安装Node.js以便运行Vue项目。可以使用以下命令安装Node.js：
```
curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -
sudo apt-get install -y nodejs
```
在服务器上创建项目文件夹：使用mkdir命令创建一个项目文件夹，并使用cd命令进入该文件夹。
将Vue项目文件传输到服务器：使用scp命令将本地开发环境中的Vue项目文件传输到服务器上的项目文件夹中。命令示例：
```
scp -r /local/project/folder/* username@server_ip_address:/path/to/remote/folder
```
进入项目文件夹并安装依赖：使用cd命令进入项目文件夹，然后运行npm install命令安装项目的依赖包。
构建项目：使用npm run build命令构建Vue项目。该命令会在项目文件夹中生成一个dist文件夹，其中包含了构建好的前端静态文件。
配置Nginx服务器：使用sudo apt-get install nginx命令安装Nginx服务器。然后，使用文本编辑器打开Nginx的配置文件/etc/nginx/sites-available/default，将以下内容添加或修改为适用于Vue项目的配置：
```
server {
    listen 80;
    server_name example.com;

    root /path/to/your/project/folder/dist;
    index index.html;

    location / {
        try_files $uri $uri/ @rewrites;
    }

    location @rewrites {
        rewrite ^(.+)$ /index.html last;
    }
}
```
请将server_name改为您将访问项目的域名或IP地址。将root路径改为您上一步中构建出的dist文件夹的路径。
启动Nginx服务器：使用sudo service nginx start命令启动Nginx服务器。
访问项目：在浏览器中输入服务器的IP地址或域名，即可访问部署在阿里云服务器上的Vue项目。

当您对Vue项目进行了更改后，可以使用相同的步骤再次构建并部署项目。

部署Vue项目到阿里云服务器可以按照以下步骤进行操作：

服务器环境准备：确保阿里云服务器已经搭建好并且已经安装好Node.js和NPM，并且打开相关的端口。
打包Vue项目：在本地电脑的Vue项目根目录下，运行以下命令将项目进行打包：
```
npm run build
```
该命令会在项目根目录下生成一个dist文件夹，里面包含了打包后的静态文件。
将打包后的文件上传到服务器：可以使用FTP工具将本地的dist文件夹上传到阿里云服务器的指定目录下。或者，也可以使用Git将项目代码部署到服务器。
安装Nginx：登录到阿里云服务器，使用以下命令安装Nginx：
```
sudo apt-get update
sudo apt-get install nginx
```
配置Nginx：使用以下命令打开Nginx配置文件：
```
sudo nano /etc/nginx/sites-available/default
```
将文件内容修改为：
```
server {
 listen 80;
 server_name your_domain_name;

 location / {
     root /path/to/your/dist;
     index index.html;
     try_files $uri $uri/ /index.html;
 }
}
```
将your_domain_name替换为你的域名，/path/to/your/dist替换为你上传的dist文件夹的路径。