阿里云服务器部署vue项目

luotuoemo • 2023年8月14日 15:07 • 阿里云 • 阅读 781

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

安装Node.js：在服务器上执行以下命令安装Node.js：

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

克隆或上传Vue项目到服务器上。
进入Vue项目的根目录，执行以下命令安装依赖：
```
npm install
```
构建Vue项目：执行以下命令构建Vue项目：
```
npm run build
```
该命令将会在项目根目录下生成一个dist目录，其中包含构建好的静态资源文件。
安装和配置Nginx：执行以下命令安装Nginx：
```
sudo apt-get install nginx
```
配置Nginx，将Vue项目的根目录配置到Nginx的配置文件中（通常位于/etc/nginx/sites-available/default），并重启Nginx：
```
 sudo vim /etc/nginx/sites-available/default
```
找到server段落，在location段落中添加以下配置：
```
location / {
 root /path/to/vue-project/dist;
 index index.html;
 try_files $uri $uri/ /index.html;
}
```
其中/path/to/vue-project是Vue项目的根目录。
保存并退出配置文件，重启Nginx：
```
sudo service nginx restart
```
现在，您可以通过访问服务器的IP地址或域名来查看部署好的Vue项目了。

注意：在部署过程中，需要确保服务器的防火墙已经打开了需要的端口（如80端口）。此外，还应该注意服务器的安全性，以防止未经授权的访问。

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

在阿里云服务器上安装Node.js和npm（如果还没有安装的话）。可以通过以下命令安装：
```
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
```
将Vue项目的代码上传到阿里云服务器。可以使用FTP工具或者通过Git Clone命令来上传代码。
进入Vue项目的根目录，在命令行中运行以下命令来安装相关的依赖：
```
npm install
```
构建Vue项目。在命令行中运行以下命令：
```
npm run build
```
这将会生成一个dist目录，里面包含了构建好的静态文件。
使用一个Web服务器来运行Vue项目。可以使用Nginx或者Apache等Web服务器。以下以Nginx为例：
- 安装Nginx：
```
sudo apt-get install nginx
```
- 打开Nginx的默认配置文件：
```
sudo nano /etc/nginx/sites-available/default
```
- 修改配置文件，将其中的root目录指向Vue项目的dist目录：
```
server {
     ...
     root /path/to/vue/project/dist;
     index index.html;
     ...
}
```
- 保存并退出编辑器。
- 重启Nginx服务：
```
sudo systemctl restart nginx
```
现在，通过浏览器访问阿里云服务器的公网IP或域名，应该就可以看到部署好的Vue项目了。