UI 框架-完工部署

再好的制作，也要部署上去让别人看到才算数

不然面试官哪有时间慢慢看你代码，2333

---

生成文件位置

首先要生成可部署文件

我们不希望生成的文件被 vite 随便乱扔，所以要先配置一下

打开 vite.config.ts，写入 base 和 assetsDir 字段

// vite.config.ts
export default {
    base: '/',//指定打包后文件的默认引用路径
    assetsDir: 'assets',
}

现在，vite 会在生成的时候将生成的静态文件全部放入根目录下的 dist/assets 文件夹，且所有的相对路径都会被解读为 / 开头

此时 vite.config.ts 大致有如下模样

// @ts-nocheck
import { md } from "./plugins/md";
import fs from 'fs'
import { baseParse } from '@vue/compiler-core'

export default {
    base: '/',//指定打包后文件的默认引用路径
    assetsDir: 'assets',
    plugins: [md()],
    vueCustomBlockTransforms: {
        example: (options) => {
            const { code, path } = options
            const file = fs.readFileSync(path).toString()
            const parsed = baseParse(file).children.find(n => n.tag === 'example')
            const title = parsed.children[0].content
            const main = file.split(parsed.loc.source).join('').trim()
            return `export default function (Component) {
Component.__sourceCode = ${JSON.stringify(main)
        }
Component.__sourceCodeTitle = ${JSON.stringify(title)}
}`.trim()
        }
    }
};

项目配置

根据你想要的部署环境而定

一般有自己配置的反向代理（如 nginx）或 github page 等

不管是哪种，部署前都要检查一下 vite.config.ts 和 src/router.ts 中的配置

history 模式

修改 vite.config.ts 中的 base 字段为 '/'

修改 src/router.ts 中的 history 为 createWebHistory，即

import { createWebHistory, createRouter } from 'vue-router'
const history = createWebHistory()

hash 模式

修改 vite.config.ts 中的 base 字段为 './'

修改 src/router.ts 中的 history 为 createWebHashHistory，即

import { createWebHashHistory, createRouter } from 'vue-router'
const history = createWebHashHistory()

memory 模式

不推荐

构建

npm run build

根目录下生成的 dist 目录，就是可以部署的目录了

部署

nginx

nginx 等反向代理服务器，可以使用 history 模式或 hash 模式

使用 history 模式的话，指定入口为 index.html，部署后访问部署路径即可

使用 hash 模式的话，可以指定入口，访问方式同 history 模式；也可以不指定入口，但是部署后访问部署路径时，必须要加上文件名 index.html

github page

只能使用 hash 模式

建议

自己服务器快的话，反向代理不错，毕竟可以用 history 模式，url 好看一些

但是要部署 github page 的话，建议不要部署到 github，而是部署到 gitee，毕竟 github 在墙外，有时候访问不那么顺畅，而 gitee 是国内的，速度飞快

不过 github 会自动更新部署页，gitee 在重新提交代码后，要手动点击 page 设置中的更新，才会真正更新

感言

Laby UI 的制作过程，已经全部写完，放在本博客上了

还真是花了相当的时间，写代码容易，写博客难啊，2333

---

感谢阅读