Cloudflare部署静态网页

Chromatic Vizier...About 3 min

Cloudflare部署静态网页

这篇文章主要介绍如何把一个h5网页或者vue项目部署到公网，这是一个很常用的东西。

创建vue项目

如果事先安装了node和vue，可以直接在cmd输入命令

vue ui

打开创建项目的ui界面。注意，一定要在希望创建项目的盘符下打开cmd，打开ui后不支持更换盘符。

包管理器选npm，创建git仓库；下一步选手动创建vue2项目，把eslint关掉。再下一步选vue2.x。

创建好后，在gitlab创建一个空项目，配置按下图就行：

其中部署目标选edge computing，用readme初始化，其他的自己填。

之后在IDE里选Git -> Manage remotes，添加刚才空项目的地址，之后随便改点什么提交看看远程仓库有没有同步。注意，提交的时候有可能交到Master分支。

填充项目

我的目录组织是：

src/
├── components/
│   ├── Home.vue          // 首页
│   ├── test1.vue         // 页面 1
│   ├── test2.vue         // 页面 2
├── router/
│   └── index.js          // 路由配置
└── App.vue               // 主组件

其中index.js配置路由信息：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import test1 from '../components/test1.vue';
import test2 from '../components/test2.vue';

// 注册 Vue Router
Vue.use(Router);

// 导出路由配置，注意，因为我用的是vue2，导出方式要用vue-router3.x的写法，不然会报错
export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home,
        },
        {
            path: '/page1', // 相对根目录（域名）的路由路径
            name: 'Page1', // 路由信息的名字，随便改
            component: test1, // 不能乱改，这是上边导入的，即子页面组件导出的组件名
        },
        {
            path: '/page2',
            name: 'Page2',
            component: test2,
        },
    ],
});

写好路由信息后，需要把它配进项目，在main.js中：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入配置文件

Vue.config.productionTip = false

new Vue({
  router, // 路由信息挂载进App对象 
  render: h => h(App),
}).$mount('#app')

由于已经把所有的页面路由信息都加在了Home.vue里，所以App.vue其实已经独立在项目之外了，在前端是不可见的：

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

真正的根是Home.vue，也就是项目一打开就看到Home.vue：

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <ul>
      <li><router-link to="/page1">跳转到页面 1</router-link></li>
      <li><router-link to="/page2">跳转到页面 2</router-link></li>
      <!-- 这是跳转内部链接的方式，文字部分可以加样式 -->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

而它的子页面，以test1.vue为例：

<template>
  <div>
    <h1>这是页面 1</h1>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
export default {
  name: 'test1', //  导出的是组件名，外边要访问这个页面需要通过这个名字
};
</script>

这样一来就实现了简单的主页+子页跳转模式。

打包项目

项目打包其实就是要生成一个dist文件夹，也就是把它变成一个纯html。幸运的是这一步基本上不需要手动做，部署时Cloudflare会自动干这事，当然也可以手动打包试试看：

npm run build