如何将nuxt项目部署到github pages (码云 pages) 上

如何将nuxt项目部署到github pages (码云 pages) 上

前言:此文章包括了以下几点:

1:如何部署
2:部署到Page后,静态资源加载报404
3:从默认页面跳转到其他页面报404
4:github Pages上的页面打开特别慢。

一:使用Nuxt.js脚手架工具create-nuxt-app快速创建项目

1:确保安装了npx(npx在NPM版本5.2.0默认安装了):

npx create-nuxt-app <项目名>

后续选项可以自己跟实际情况选择。

二:在github上新建仓库

1:选择右上角新建一个仓库

2:填选项

3:本地找个文件夹,git clone 此仓库

4:上传本地的代码

三:如何使用github pages

1:你的nuxt项目在本地跑一遍generate

npm run generate

这个时候本地打包了一个dist文件夹,里面是你的静态资源。

2:在github上打开你的项目,选择settings,拖到github pages那块。此时你会发现默认的是none。

3:选项的意思:

  • master branch是选择你master分支下,项目根目录的那个html文件。如果没有index.html就不行
  • master branch/docs folder 是选择你master分支下,docs目录下的那个index.html。
  • 如果你后期添加了其他分支,也会多相应的选项

当你选择某个分支后,github pages哪里就会多个链接,就是你想看到了静态资源的页面

4:在nuxt.config.js中修改配置,把输出资源的目录改为docs。然后执行npm run generate。

5:提交资源到github上。然后打开setting里的链接,(记住要选择master branch/docs folder )。这个时候网页上显示了我们的项目

问题一:html中引用的js文件,img,a标签资源地址都是类似以下这种,导致引入不了文件

<script src="/_nuxt/e70f9a4d666a9e55ebb0.js" defer>

  解决:配置router参数。

这里的/nuxt-blog是我的项目名,也是github pages后面的项目名

问题二:当我页面有很多时,执行npm run generate后,会发现除了首页外,其他的页面都会打包成 ‘文件夹 / index.html‘的形式,导致我们页面路由跳转时,页面报404.这个时候我们需要接着配置nuxt.config.js

打包上传后,你会发现你的项目可以正常运转了。

问题三:github pages页面打开太慢怎么办?

解决:用国内的码云,所有步骤都和github一样。只有Pages这个功能放的地方不一样。 码云的Pages服务是收费的,你可以免费试用一个月。

原文地址:https://www.cnblogs.com/momozjm/p/12540317.html

时间: 2024-10-14 08:10:45

如何将nuxt项目部署到github pages (码云 pages) 上的相关文章

Git同步更新操作GitHub和码云仓库上面的代码

一.前言 问题: 小编在生活中,一般都是将代码保存到github上,但由于国内的码云仓库确实速度比github快很多,用起来也很方便,于是后来就慢慢转码云了,当然小编在github上的代码也不想放弃更新,于是有没有方法可以让我们可以同步更新这两个git远程仓库呢?? 答案: 办法肯定是有的,下面我们就来实际进行操作一下吧 ~ 二.同步更新操作GitHub和码云仓库代码 即提交代码时,github仓库和码云仓库上的代码都同步更新提交上去了,而不需要分开去进行两次提交 ~ (1)将github和码云

如何将一个已有的项目托管到github或是码云上?

场景一:已有的一个项目,要把它托管到Git上去,步骤和方法如下: 方法一:①在工程的路径下 : git init 建一个裸仓库. ②远程仓库地址 :将本地的仓库和远程仓库关联 git remote add origin 仓库地址 ③ 将远程仓库的东西拉下来,与本地仓库合并 git pull origin master ④ 将文件存进暂存区 git add . ⑤ git commit -am "提交的信息" ⑥ 提交到远程仓库 git push -u origin master 方法二

idea使用git管理代码,代码上传至github或者码云

1:下载git地址:  https://git-scm.com/download/win 2:启动Git Bash输入如下命令(绿色标注的:为分隔号,不是相关命令): git :查看是否安装成功 ssh-keygen -t rsa -C "你的邮箱地址" :配置ssh秘钥,执行中第一步是让你确认是否生在该路径下生成秘钥,也可以自己写一个新的路径,值班直接回车就好,然后再输入两次密码 git config --global user.name  "你的用户名":配置全

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

Vue 项目部署到GitHub Pages并同步到Gitee Pages

前言:相信很多前端开发者都拥有自己的vue项目,若想把自己的项目做成网站分享给大家看,最常用的就是利用Github提供的GitHub Pages服务和Gitee提供的Gitee Pages服务.其中,Github是国外网站,Gitee是国内网站(访问速度较快).本文给大家介绍的是如何将 vue-cli 3.0+项目部署到github pages 并同步到 gitee Pages上. 一.服务说明与注意事项 在你的github项目设置的GitHub Pages项,有这么一句话: GitHub Pa

将项目部署到github的方法

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 Web管理界面以外,还提供了订阅.讨论组.文本渲染.在线文件编辑器.协作图谱(报表).代码片段分享(Gist)等功能.目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on Rails.jQuery.python 等. 作为一个代码托管平台,我们怎么才能将项目部

用GitBash将eclipse的一个Java项目部署到Github上

花了一下午功夫总算是把这个拼图游戏小项目部署到Github上了,用GitBash命令出现的问题很多,原因当然是自己没玩熟,一些说明都是纯英文的,诶. http://blog.csdn.net/pony_maggie/article/details/42201435,这个博客讲的就是针对这个操作的,至于其他clone什么的,暂时用不上.下面是我的依次命令. 先建一个空仓库,默认都None,别慌初始化一个README.md,等上传上去了再add一个. init会初始化一个.git隐藏文件,将这个文件

使用Git上传本地项目到GitHub/Coding/码云

Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. 本文以利用Git上传本地项目到GitHub为例,为那些刚刚接触Git的新手提供使用Git上传本地项目到GitHub/Coding/码云的方法. 注册GitHub账号并安装Git 首先注册GitHub账号,并添加新项目. 下载并安装Git,安装路径可以自己修改,安装过程中的一些设置选择默认即可. 利用Git上传本地项目到GitHub 在本地项目文件夹中空白处右键单击选择"Git Bash Here"

GitHub Desktop+码云(GIT.oschina)使用方法

GitHub时不时被墙,虽说搞代码的FQ是必备技能,但总是不太方便.于是悦老大就选择了用国内的码云(开源中国的GIT工具).GitHub其实是有个桌面版的软件的,自从用上了它基本告别了命令行敲git命令的时代.接下来就来说说GitHub Desktop与开源中国的GIT码云是怎么搭配的吧. 一.如何从码云GIT导入到GitHubDeskTop桌面工具. 1.先用命令行切换到本地的目录. 2.使用git clone 码云GIT地址 命令将项目克隆到本地. 3.在GitHub Desktop上添加(