Vue 应用部署到说就是这几步项目具体的安装步骤可以参考对应的文档
作者：网络发烧程序猿 |
发布时间：2025-06-20 |
Vue 应用部署到 Linux 服务器，简单来说就是这几步！
一、构建项目
首先，你需要在你的电脑上构建你的 Vue 项目。这需要你安装了 Node.js 和 npm（或者 yarn）。然后，进入你的 Vue 项目文件夹，运行以下命令来安装依赖：
```
npm install 或者用 yarn install
```
接着，构建你的项目，生成可以部署的静态文件：
```
npm run build 或者用 yarn build
```
构建完成后，你会在项目根目录下看到一个叫做 `dist` 的文件夹，里面就是你的静态文件。
二、配置服务器
现在，我们需要在 Linux 服务器上配置 Web 服务器，比如 Nginx。如果服务器上还没有安装 Nginx，你可以用以下命令安装它：
```
sudo apt-get install nginx 对于基于 Debian 的系统
```
或者：
```
sudo yum install nginx 对于基于 Red Hat 的系统
```
三、部署文件
接下来，你需要将 `dist` 文件夹上传到服务器。你可以使用 SCP 或者 FTP 来上传文件。这里是一个使用 SCP 的例子：
```
scp -r /path/to/your/dist username@yourserver:/path/to/deploy
```
然后，编辑 Nginx 的配置文件，通常路径是 `/etc/nginx/sites-available/yourdomain`，并指向你的 `dist` 文件夹：
```
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/deploy;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
```
保存并关闭文件，然后重新加载 Nginx：
```
sudo systemctl reload nginx
```
四、启动服务
最后，确保 Nginx 已经启动：
```
sudo systemctl status nginx
```
现在，你应该可以通过访问服务器的 IP 地址或域名来查看你的 Vue 应用了。
总结和建议
你就可以将 Vue 应用部署到 Linux 服务器上了。记得要确保服务器的安全性和稳定性，比如配置防火墙、使用 HTTPS 等，这样可以提高网站的性能和安全性。
FAQs：Vue 如何部署到 Linux 服务器？
| 步骤 | 操作 |
| --- | --- |
| 生成生产环境构建文件 | 在本地开发环境中使用 `npm run build` 或 `yarn build` 命令生成生产环境所需的构建文件。构建完成后，会在项目根目录下生成一个 `dist` 文件夹，里面包含了所有需要部署到服务器的静态文件。 |
| 将构建文件上传到服务器 | 将生成的 `dist` 文件夹上传到 Linux 服务器。可以使用 FTP 工具（如 FileZilla）或 SCP 命令进行文件上传。确保将 `dist` 文件夹上传到服务器上你希望部署 Vue 应用的位置。 |
| 安装并配置 Web 服务器 | 在 Linux 服务器上安装一个 Web 服务器（如 Nginx 或 Apache）。具体的安装步骤可以参考对应的官方文档。 |
| 配置 Web 服务器 | 配置 Web 服务器以将请求指向 Vue 应用的静态文件。对于 Nginx 服务器，可以在 Nginx 配置文件中添加一个 location 指令来指向 `dist` 文件夹的路径。对于 Apache 服务器，可以使用 .htaccess 文件来进行配置。 |
| 启动 Web 服务器 | 启动安装好的 Web 服务器，确保配置生效。 |
| 访问 Vue 应用 | 通过服务器的 IP 地址或域名访问部署好的 Vue 应用。如果一切配置正确，你应该能够看到 Vue 应用在浏览器中正常运行。 |