什么是 Nuxt.js
Nuxt.js 是一个基于 Vue.js 的轻量级框架，用于构建高性能的应用程序。它具有自动化的路由和状态管理，支持服务器端渲染和静态生成等功能。Nuxt.js 能够快速构建出具有优秀用户体验的单页应用程序（SPA）。
SPA 中的静态资源
在 SPA 中，静态资源主要包括 CSS、JavaScript 和图片等文件。这些文件需要被加载到浏览器中，以便渲染出页面。在开发过程中，我们需要将这些静态资源打包成一个或多个文件，以便在生产环境中进行部署。
静态资源的自动部署
静态资源的自动部署是指在代码提交到代码仓库后，自动触发部署流程，将代码部署到服务器上。这样能够提高开发效率，减少手动部署的时间和错误率。
Nuxt.js 中的静态资源自动部署
Nuxt.js 提供了一个名为 nuxt generate 的命令，可以将应用程序生成为静态文件。这个命令会自动将每个页面生成为一个 HTML 文件，并将所有的 CSS、JavaScript 和图片等文件打包成一个或多个文件，以便在生产环境中进行部署。
配置静态资源的输出目录
在 nuxt.config.js 文件中，我们可以配置静态资源的输出目录。默认情况下，静态资源会输出到 dist 目录中。
export default {
generate: {
dir: 'dist'
}
}部署静态资源到服务器
我们可以使用 GitLab CI/CD、Travis CI 等工具来实现自动部署。这里以 GitLab CI/CD 为例，介绍如何部署静态资源到服务器上。
配置 GitLab CI/CD
在 GitLab 项目的根目录中创建 .gitlab-ci.yml 文件，并添加以下内容：
// javascriptcn.com 代码示例
image: node:14.17.5
cache:
paths:
- node_modules/
stages:
- build
- deploy
build:
stage: build
script:
- npm install
- npm run build
deploy:
stage: deploy
script:
- apt-get update && apt-get install -y sshpass
- sshpass -p $SSH_PASSWORD ssh -o StrictHostKeyChecking=no $SSH_USER@$SSH_HOST "rm -rf $SSH_DIR/*"
- sshpass -p $SSH_PASSWORD scp -r dist/* $SSH_USER@$SSH_HOST:$SSH_DIR/
only:
- master这个文件定义了两个阶段：build 和 deploy。在 build 阶段中，我们安装依赖并生成静态资源。在 deploy 阶段中，我们使用 sshpass 工具连接到服务器，并将静态资源上传到服务器上。
在服务器上创建目录
在服务器上创建一个目录，用于存放静态资源。假设我们将目录命名为 example.com。
mkdir /var/www/example.com
配置环境变量
在 GitLab 项目的设置页面中，添加以下环境变量：
SSH_USER: 服务器用户名SSH_PASSWORD: 服务器密码SSH_HOST: 服务器主机名或 IP 地址SSH_DIR: 服务器上存放静态资源的目录路径
提交代码并触发自动部署
将代码提交到 GitLab 仓库中，并将代码推送到 master 分支。GitLab CI/CD 将自动触发部署流程，并将静态资源部署到服务器上。
总结
Nuxt.js 提供了一个方便的命令 nuxt generate，可以将应用程序生成为静态文件。我们可以使用 GitLab CI/CD、Travis CI 等工具来实现自动部署。通过自动部署，我们可以提高开发效率，减少手动部署的时间和错误率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d6987d2f5e1655d83ad67