Nginx部署Vue前端项目全攻略：从构建到上线一步到位！

要将前端 Vue 项目部署到 Nginx，你需要遵循以下步骤：

首先确保你已经安装了 Node.js 和 npm。如果没有，请访问 Node.js 官网 下载并安装。

使用 Vue CLI 创建一个新的 Vue 项目（如果你还没有一个）：

npm install -g @vue/cli vue create my-project

进入项目目录：

cd my-project

构建生产环境的 Vue 项目：

npm run build

这将在项目目录下生成一个名为 dist 的文件夹，其中包含用于部署的静态文件。

安装 Nginx。根据你的操作系统，安装方法可能有所不同。以下是在 Ubuntu 上安装 Nginx 的命令：

sudo apt update sudo apt install nginx

配置 Nginx。创建一个名为 my-project 的新配置文件，并将其放在 /etc/nginx/sites-available/ 目录下：

sudo nano /etc/nginx/sites-available/my-project

将以下内容粘贴到文件中，替换 /path/to/your/my-project/dist 为你的 Vue 项目的 dist 文件夹的实际路径：

server { listen 80; server_name yourdomain.com www.yourdomain.com; root /path/to/your/my-project/dist; index index.html; location / { try_files $uri $uri/ /index.html; } }

保存并退出编辑器。

创建一个符号链接，将新配置文件链接到 sites-enabled 目录：

sudo ln -s /etc/nginx/sites-available/my-project /etc/nginx/sites-enabled/

检查 Nginx 配置文件的语法是否正确：

sudo nginx -t

如果一切正常，你将看到类似于 “configuration file /etc/nginx/nginx.conf test is successful” 的消息。

重启 Nginx 以应用更改：

sudo systemctl restart nginx

现在，你应该可以通过访问 http://yourdomain.com 或 http://www.yourdomain.com 来查看你的 Vue 项目了。如果你使用的是本地服务器，可以使用 localhost 或 127.0.0.1。

最后，给大家推荐一个近期比较火爆的AI创作模型工具，可以大幅度提高工作效率，目前还在不断优化升级中，有兴趣或想体验的可以看看下方文章介绍： 

“文字游侠”：AI赋能下的自媒体革命，一键生成爆款文章变现！附上渠道和教程！

​​​​​​【释放创造力，驾驭文字的力量】——文字游侠：你的私人写作助手