使用码云Pages部署SPA单页面

• 简介
• • 官方文档
  • 部署SPA
  • 初始项目结构
  • 部署SPA前的准备
  • • 1. 部署根目录下新增 .spa 文件
    • 2. 修改dist文件夹中的 index.html 文件对静态资源的引用
  • 开始部署Pages

简介

码云Pages提供静态页面部署。

官方文档

码云Pages静态页面托管

部署SPA

学会部署普通码云Pages之后就可以尝试部署SPA静态页面了。

初始项目结构

dist
  |-css
  |-js
  |-img
  favicon.ico
  index.html
public
  |-...
node_modules
  |-...
src
  |-...
package.json
README.md
           

假设码云仓库内的文件结构同上（这是 Vue 项目通常的文件结构），其中 dist 是执行build命令后打包出来的文件。

部署SPA前的准备

1. 部署根目录下新增 .spa 文件

首先需要在 根目录 下新建一个内容为空的

.spa

文件。

该目录结构下的 根目录 即为

dist

文件夹。

<!-- 部署后的项目结构 -->
dist
  |-css
  |-js
  |-img
  favicon.ico
  index.html

  .spa（此为新增的空文件）
...
           

码云的Nginx会自动识别该文件，从而切换部署配置。

2. 修改dist文件夹中的 index.html 文件对静态资源的引用

vue在打包时，会自动将引用的css、js等文件进行压缩。打包出来的引用路径不能直接部署，需要修改，否则部署后会报出404错误。

一般是将引用路径的绝对路径修改为相对路径，例如

/js/xxxx

-->

./js/xxxx

注意： head中的

link

以及body中的

script

都要记得修改。

例如：

<!-- link修改前 -->
<link href=/js/app.a47ec86c.js rel=preload as=script>
<!-- link修改后 -->
<link href=./js/app.a47ec86c.js rel=preload as=script>

<!-- script修改前 -->
<script src=/js/app.a47ec86c.js></script>
<!-- script修改后 -->
<script src=./js/app.a47ec86c.js></script>
           

将引用路径修改完毕后，就可以使用码云Pages进行部署了。

开始部署Pages

1. 进入仓库 -> 点击服务 -> Gitee Pages
2. 选择部署分支
3. 部署目录填写 dist
4. 启动
5. 完成部署