要将前端 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赋能下的自媒体革命，一键生成爆款文章变现！附上渠道和教程！
【释放创造力，驾驭文字的力量】——文字游侠：你的私人写作助手
