代码拉取完成,页面将自动刷新
本项目是根据黑马开源 Vue3 项目小兔鲜学习而来,此处不做过多项目细节描述,感兴趣可前往我的博客 小兔鲜 查看。这里主要记录项目打包的步骤。
npm run build
# or
yarn build
默认情况下,构建会输出到 dist 文件夹中。
当你构建完成应用后,你可以通过运行 npm run preview
命令,在本地测试该应用,利用好控制台,找BUG修BUG。
每次修改代码后要先build构建打包再preview本地测试才能显示出修改代码后最新的效果。
vite preview 命令会在本地启动一个静态 Web 服务器,将 dist 文件夹运行在 http://localhost:5000。这样在本地环境下查看该构建产物是否正常可用就方便了。
这一点非常重要,可以在本地测试应用,当本地测试没问题后再推到仓库开启 Gitee Pages服务即可,不需要频繁推到仓库更新Gitee Pages测试了。
在 vite.config.js
中设置正确的 base。
注意:
- 如果你要部署在
https://<USERNAME>.gitee.io/
上,你可以省略 base 使其默认为'/'
即:base:'/'
。- 如果你要部署在
https://<USERNAME>.gitee.io/<REPO>/
上,例如你的仓库地址为https://gitee.com/<USERNAME>/<REPO>
,那么请设置base
为'/<REPO>/'
即:base:'/<REPO>/'
。
例如:我的仓库地址为:https://gitee.com/duyidao/rabit
,我生成的 Gitee Pages 为: http://duyidao.gitee.io/rabit
则我需要如下配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base:'/rabit/'
})
注意: base里前后各有一个/,省略一个都不行!
打包好后提交到仓库内,Gitee Pages 托管即可。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。