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

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

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

 

首先确保你已经安装了 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赋能下的自媒体革命,一键生成爆款文章变现!附上渠道和教程!

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

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

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...