如何使用Gitee Pages服务 搭建Vue项目

目录
  • 1.背景
  • 2.Gitee Pages的介绍
  • 3.上传自己的项目到Gitee上。
  • 4.如果你的是Vue项目(重点讨论)
  • 5.本地`build
  • 7.将build得到的文件
  • 8.点击项目导航栏中的服务
  • 9.开始构建

1.背景

1.Gitee（GitHub） Pages 服务作为一个页面容器，可以说是非常方便了。我们可以在上面免费部署前端项目。

2.并且同时获得一个附带.gitee.io（github.io）的网址。

3.其他优点就不再赘述，可自行百度。

2.Gitee Pages的介绍

具体可以看这个网址Gitee Pages官方介绍

3.上传自己的项目到Gitee上。

点击项目导航栏中的服务 --> Gitee Pages

如果是静态项目，此处不再说啥，直接构建，你的项目中有index.html(主入口)就可以

4.如果你的是Vue项目(重点讨论)

首先，根据官方指示

在项目路径中添加.spa文件

原理，我不是很清楚，应该是给Nginx做一个标识作用吧。

5.本地`build

在构建前，一定要注意修改两个地方

一、将build.js文件中的console.log全部注释

二、将config/index.js中的assetsPublicPath值改为./或图中的英文指示改为你的项目名称加/如： '/ltz/'

解决JS访问不到的问题。

注意，此处修改的assetsPublicPath为build对象中的！

三、打开build/utils.js文件（解决CSS/字体找不到问题）

在如下位置添加 publicPath: '../../'

在本地运行npm run build，得到`dist

`

7.将build得到的文件

上传到你git仓库中

8.点击项目导航栏中的服务

--> Gitee Pages

9.开始构建

选择你的分支，如果只有一个分支，就选master

选择部署目录，本文中，build后的文件全部都在dist目录下，所以，填入dist。

如果，你发现，构建后，css\js\img等文件，报了404异常，请看本文第5步 -> 二\三

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目打包部署到GitHub Pages的实现步骤

    Vue项目打包部署到GitHub Pages的实现步骤

    目录 前言 前期准备 重要说明 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程.本文重点在于: 如何将vue项目源码(含dist目录)同步到到github仓库,同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页. 针对以上问题,作者以往的做法是将Vue项目源码托管到源码仓库,然

  • vue项目打包上传github并制作预览链接（pages）

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • 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

  • 如何使用Gitee Pages服务 搭建Vue项目

    目录 1.背景 2.Gitee Pages的介绍 3.上传自己的项目到Gitee上. 4.如果你的是Vue项目(重点讨论) 5.本地`build 7.将build得到的文件 8.点击项目导航栏中的服务 9.开始构建 1.背景 1.Gitee(GitHub) Pages 服务作为一个页面容器,可以说是非常方便了.我们可以在上面免费部署前端项目. 2.并且同时获得一个附带.gitee.io(github.io)的网址. 3.其他优点就不再赘述,可自行百度. 2.Gitee Pages的介绍 具体可以

  • 使用webpack搭建vue项目及注意事项

    有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • VSCode搭建Vue项目的方法

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框.点击终端-新建终端,输入上述命令,回车,等待安装完成. 3.安装webpack,它是打包js的工具 安装命令: npm install -g webpack 安装方法同上. 4.安装完成之后就可以开始创建vue项目,首先创

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • VSCode搭建vue项目的实现步骤

    VSCode搭建vue项目的实现步骤

    目录 一.安装环境: 二.建项目: 一.安装环境: 1.默认Vscode.nodejs已经安装好了 2.全局安装vue-cli,vue-cli帮助我们快速构建Vue项目. npm install -g @vue/cli 3.安装webpack (打包js的工具) npm install -g webpack 二.建项目: 1.开始创建vue项目,首先创建一个文件夹用来存放项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹.比如我的文件夹就是VUE 注意:接下来的命令需要在cmd命令

  • vue-cli5搭建vue项目的实现步骤

    vue-cli5搭建vue项目的实现步骤

    vue-cli 的最新版本是5.0.4 首先需要全局安装 vue-cli yarn global add @vue/cli 已经安装的可以升级到最新版 yarn global upgrade --latest @vue/cli 然后开始使用 vue-cli 5 搭建项目 ‘hello-world’ vue create hello-wold 会出现下面的配置项: 1. 选择自动配置还是手工配置 选择手工配置 2. 选择插件 选择babel,typscript,路由,css预编译,代码格式化 3.

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • 安装node.js以及搭建vue项目过程中遇到的问题详解

    目录 一.node.js安装 二.如何找node.js历史版本 1.点击DOWNLOADS 2.点击页面下方 3.翻页找到历史版本 三.检查是否安装成功? 四.安装成功后需要配置环境变量: 五.环境搭建 六.项目创建 总结 一.node.js安装 进入官网 https://nodejs.org/en/download/ 直接点击下载安装!安装过程直接下一步就行: 二.如何找node.js历史版本 (https://nodejs.org/en/download/) 1.点击DOWNLOADS 2.

  • webpack搭建vue 项目的步骤

    webpack搭建vue 项目的步骤

    前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤: 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成package.json文件 npm init 大概生成的package.json 如下: { "name": "vue-demo", "version": "1.

随机推荐