从零到一：Nuxt.js（Vue SSR）项目部署全攻略
2023-11-12 13:23:06
前言
在前端开发中，单页应用（SPA）凭借其流畅的用户体验和较快的加载速度而受到广泛欢迎。然而，SPA也存在一个缺点，那就是SEO（搜索引擎优化）效果不佳。这是因为SPA在加载时不会将页面内容直接发送给浏览器，而是通过JavaScript动态生成，这使得搜索引擎难以抓取和索引页面内容。
为了解决这个问题，诞生了SSR（服务器渲染）技术。SSR是指在服务器端将应用程序的状态渲染为静态HTML，然后将HTML发送给浏览器。这样，搜索引擎就可以抓取和索引页面内容，从而提高网站的SEO排名。
Nuxt.js是一个基于Vue.js的通用框架，它集成了SSR功能，可以帮助开发者轻松构建SEO友好的单页应用。本文将详细介绍如何从零开始创建一个Nuxt.js项目，并将其部署到服务器（Nginx+PM2）上。
项目创建
首先，我们创建一个新的Nuxt.js项目。可以通过以下命令完成：
npx create-nuxt-app <project-name>
其中，<project-name>是要创建的项目名称。
创建项目后，进入项目目录，并安装必要的依赖：
cd <project-name>
npm install
项目配置
接下来，我们需要配置Nuxt.js项目。打开项目的nuxt.config.js文件，并根据需要进行配置。
以下是一些常用的配置项：
target: 指定项目的构建目标。默认值为'server',表示项目将以SSR模式运行。head: 指定页面<head>部分的内容，包括标题、、等。router: 指定项目的路由配置。build: 指定项目的构建配置，包括构建模式、输出目录等。
项目构建
配置好项目后，就可以进行构建了。可以通过以下命令构建项目：
npm run build
构建完成后，会在项目根目录下的dist目录中生成静态文件。
部署项目
现在，我们需要将项目部署到服务器上。本文将使用Nginx和PM2来部署项目。
1. 安装Nginx
首先，我们需要安装Nginx。在大多数Linux发行版中，可以通过以下命令安装Nginx：
sudo apt-get install nginx
安装完成后，启动Nginx服务：
sudo systemctl start nginx
2. 配置Nginx
接下来，我们需要配置Nginx来代理请求到我们的Nuxt.js应用。打开Nginx的配置文件/etc/nginx/sites-enabled/default，并在其中添加以下内容：
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://localhost:3000;
}
}
其中，example.com是你的域名，localhost:3000是你Nuxt.js应用运行的地址和端口。
保存并关闭配置文件，然后重启Nginx服务：
sudo systemctl restart nginx
3. 安装PM2
PM2是一个进程管理器，可以帮助我们管理Nuxt.js应用的进程。通过以下命令安装PM2：
npm install -g pm2
安装完成后，启动Nuxt.js应用：
pm2 start npm --name my-app -- run start
其中，my-app是你的应用名称。
启动成功后，可以通过以下命令查看应用的状态：
pm2 list
结语
以上就是如何从零开始创建一个Nuxt.js项目，并将其部署到服务器（Nginx+PM2）上的详细过程。希望这篇指南对你有帮助。
