Vercel 部署 NuxtJS 應用

2021-10-24 01:38:51 字數 2552 閱讀 4759

nuxtjs官方介紹了幾個服務端部署的方式。

其中 github 是將應用打包成靜態資源,然後使用 github pages 發布。

github pages 只能託管靜態頁面。

像使用nuxtjs開發的ssr應用,可以選擇使用 vercel。

案例:先使用 nuxtjs + realworld 搭建乙個簡單案例。

首先需要去vercel官網註冊賬號,或用github賬號授權登入

注意,主郵箱是qq郵箱的,認證會不通過:

可以新增其他郵箱,並設定為主郵箱,等註冊後,再把主郵箱切換回來。

全域性安裝 vercel

npm i -g vercel
在專案根目錄新建乙個now.json檔案。

為了通過vercel進行部署,nuxt.js團隊和貢獻者使用了@nuxtjs/now-builder 官方軟體包(「 now」是vercel的前名)。

}]

}

修改 nuxt 服務埠號

// nuxt.config.js

module.exports =

}

忽略.nuxt(可選)

nuxtjs官方建議將.nuxt目錄新增到.npmignore.gitignore列表中。

執行命令vercel發布

首次執行會要求輸入郵箱驗證登入

完成後,再次執行vercel,根據提示步驟進行操作:

# 是否部署當前專案 -> y

? set up and deploy 「d:\work\learn\realworld-nuxtjs」? [y/n]

# 選擇發布到的位置 -> 直接回車

# 如果是github賬戶登入,預設就是賬戶名,顯示在提示下面

which scope do you want to deploy to?

·[githubname]

# 是否鏈結到乙個存在的專案 -> n

? link to existing project? [y/n]

# 為專案命名,使用預設即可 -> 直接回車

? what』s your project』s name? (realworld-nuxtjs)

# 選擇**的位置,當前**位置就是根目錄 -> 直接回車

? in which directory is your code located? ./

接著就會進行發布:

due to `builds`

existing in your configuration file, the build and development

該提示表示:由於配置檔案now.json中存在builds,所以不使用預設的構建命令。

如果是從網頁中新建專案,執行的就是預設的構建命令。

vercel首次部署完,會在專案根目錄建立.vercel目錄,內部包含project.json它儲存了為專案生成的乙個組織id和專案id

修改專案內容後,不需要使用 nuxt 打包。

直接執行vercel --prod命令,即可發布。

執行vercel命令部署時,有乙個步驟詢問發布的位置。

使用 github 賬號註冊登入的,缺省會以登入名為名建立乙個 team。

這裡選擇的就是這個 team,並且只能選擇提供的選項。

成功執行vercel命令就可以選擇它了:

Docker部署前端nuxtjs專案

1 拉取node映象,命令 docker pull node 附docker常用命令 檢視映象列表 docker images 檢視執行中的容器 docker ps 檢視所有容器 docker ps a 停止容器 docker stop cid 容器id或名稱 重啟容器 docker restart...

nuxtjs專案部署Ubuntu伺服器

由於為了達到更好的seo效果,最近研究了下nuxt.js 來做服務端渲染 ssr 本文來講講,在本地開發完成後怎麼在伺服器上配合nginx部署node專案。本地打包 上傳到伺服器 安裝伺服器環境 安裝專案依賴和測試啟動 pm2 守護啟動 nginx配置 本地打包 打包前,先設定好在伺服器中要開啟的埠...

服務端渲染 手動部署 NuxtJs 專案

nuxt.js 提供了一系列常用的命令,用於開發或發布部署。命令描述 nuxt 啟動乙個熱載入的 web 伺服器 開發模式 localhost 3000 nuxt build 利用 webpack 編譯應用,壓縮 js 和 css 資源 發布用 nuxt start 以生產模式啟動乙個 web 伺服...