哦，你好！ ðð¼
在这篇文章中，我们将使用Netlify创建一个简单的NUXT网站，以及如何配置应用程序以拥有更好的渲染器。
这篇文章与其他教程之间的区别如何在Netlify 上部署NUXT网站？ 配置带有美丽的netlify.toml
解释什么是...
nuxt
Nuxt是基于Vue.js 的开源框架，这是一个用于创建用户接口的渐进JavaScript框架。这里有一些好的功能，例如服务器端渲染（SSR），静态站点生成器，高级路由管理和全球状态管理。
Netlify
我们有一个框架，我们必须确保构建并部署它以在互联网上发布。
Netlify在这里为此，我们可以通过一些相当简单的JS应用程序进行部署。
开始创建NUXT项目！
请确保在客户端上安装了Node.js，还安装了NPM。
我们可以使用：
创建NUXT应用程序
npx nuxi@latest init my-app
终端输出：
thomasbnt@thomasbnt:~/lab$ npx nuxi@latest init my-app
Need to install the following packages:
nuxi@3.4.2
Ok to proceed? (y) y
Nuxi 3.4.2
✨ Nuxt project is created with v3 template. Next steps: 8:46:21 PM
› cd my-app
› Install dependencies with npm install or yarn install or pnpm install PM
› Start development server with npm run dev or yarn dev or pnpm run dev
不要犹豫，在您的文件夹项目中运行npm install/yarn。
在您的代码软件上打开它。
冷0文件
Netlify的功能之一是Configs Files。因此，您可以在不与Netlify的仪表板进行交互（仅一次安装）
的情况下部署网站在koude0中，我们可以添加一些用于配置部署和插件的行。
基于文件的配置设置优先
请注意，如果您具有冲突的配置值，则在NetLify.toml中指定的设置覆盖NetLify UI中的任何相应设置。
对于这个项目，有netlify.toml：
# The build part for Netlify with a Nuxt project
[build]
base='/'
publish='dist'
command='nuxt generate'
environment = { NODE_VERSION = "18.0.0" }
# We can put redirects
[[redirects]]
from = "/devto"
to = "https://dev.to/thomasbnt"
status = 301
# Also put headers
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
X-Content-Type-Options = "nosniff"
cache-control = "public, max-age=10000, must-revalidate"
创建您的存储库
netlify使用 git （提交或拉动请求）触发项目上的新传入修改。
创建您的存储库，私人或公共的作品。
和时间在GitHub上推动您的本地工作：
thomasbnt@thomasbnt:~/lab/my-app$ git init
Initialized empty Git repository in /home/thomasbnt/lab/my-app/.git/
thomasbnt@thomasbnt:~/lab/my-app$ gc .
On branch main
Initial commit
thomasbnt@thomasbnt:~/lab/my-app$ ga .
thomasbnt@thomasbnt:~/lab/my-app$ gc "Init"
[main (root-commit) a3b9cff] Init
10 files changed, 4392 insertions(+)
create mode 100644 .gitignore
create mode 100644 .npmrc
create mode 100644 README.md
create mode 100644 app.vue
create mode 100644 netlify.toml
create mode 100644 nuxt.config.ts
create mode 100644 package.json
create mode 100644 public/favicon.ico
create mode 100644 tsconfig.json
create mode 100644 yarn.lock
thomasbnt@thomasbnt:~/lab/my-app$ git branch -M main
thomasbnt@thomasbnt:~/lab/my-app$ git remote add origin git@github.com:thomasbnt/nuxt-netlify-example.git
thomasbnt@thomasbnt:~/lab/my-app$ git push -u origin main
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 12 threads
Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 82.32 KiB | 11.76 MiB/s, done.
Total 13 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:thomasbnt/nuxt-netlify-example.git
* [new branch] main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
是时候在Netlify上部署了
- 转到Netlify，create an account，它是免费的。
- 将您的git项目导入导入现有项目
- 选择github并授予集成
- 使用您的NUXT网站选择存储库
从GIT存储库中的现有项目中从NETLIFY上选择NUXT网站
- 填写所有字段，默认情况下Netlify检测它是NUXT，因此它将为您提供值。
- 推到部署站点按钮！
我们在这里！您可以看到您的网站正在构建，等待一两个分钟，并且您已经发布了网站！魔法！ ð§§ð¼
在评论中与我们分享您的网站以及您的最佳配置文件。
文档
| 检查我的Twitter account。您可以看到许多项目和更新。您也可以support me on Buy Me a Coffee, Stripe or GitHub Sponsors。感谢您阅读我的帖子！ ðÖ© |
|---|