如果是首次配置GitHub Pages,在GitHub上创建一个以自己用户名+github.io为名称的代码仓库,例如我的GitHub用户名是robin-2016,我创建的仓库名称即为robin-2016.github.io,同样将src/.vuepress/dist目录下所有文件上传刚创建的代码仓库即可,静态博客网站就由GitHub托管运行了。 在上面学习实践过程中,发现现在每个GitHub仓库...
最免费应用的方式应该是Github Pages。Github Pages是一个免费的静态网站托管服务,只需要将html文件上传到Github,你的网站就上线了。 爬爬虾之前有个完整视频介绍这块内容。Vue工程的原代码都是.vue文件。如果想发布成网站,需要打包编译成浏览器可以识别的html、JS等文件。我们可以将原代码下载到自己电脑上,进行build。
path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, 第二步,找到utils.js,在第47行左右 有一个if判断为 if (options.extract),在这里面增加一行代码 说明:这个是保证加载背景图片等css样式资源不...
保存后,依旧重新’npm run build’,打开dist目录下的index.js可以看到字体图标正常显示了。 这里为什么需要这样修改,可以参考https://github.com/vuejs-templates/webpack/issues/166。 Mock数据无法正常加载(我的做法是把模拟的json数据放到cdn上,跳过这一步) 此项目的绝大部分页面内容是通过在跟目录下创建的data....
部署到GitHub Pages 最后,我们需要将我们的应用程序部署到GitHub Pages上。我们可以使用以下步骤来完成: 在GitHub上创建一个新的仓库,并将其命名为vue3-music(与我们在vite.config.ts配置中设置的公共路径相同)。 在我们的Vue3项目根目录中,使用 Git 命令将我们的应用程序源代码推送到GitHub仓库中: ...
Github 准备工作 Nodejs安装 Node官网下载 建议安装在非系统盘的英文目录下 Node环境配置 新建文件夹 --- node_cache 和node_global(npm install -g package-name) 创建完文件后,需要更改 npmrc 中的perfix 和cache npm config set prefix "E:\Program Files (x86)\Nodejs\node_global" npm config set cach...
找到项目中的vite.config.ts|vite.config.js文件,将代码块中对应内容更改为: exportdefaultdefineConfig({base:"/REPONAME/",plugins:[],resolve:{alias:[]},}) 这样做是为了简化应用程序中的所有链接的前缀,让GitHub Page正常工作。 STEP 4:创建gh-pages分支 ...
最近在初步完成自己的掘金移动端App后,想要上传到github,并且制作一个简单的预览功能,期间遇到了一些问题,分享在此,以便查阅。 打包Vue项目 当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源。
– 如果你的Vue项目是一个多页面应用,你可以在GitHub Pages设置中选择”Select branch”,来选择对应的分支和目录。 – 使用Vue CLI构建的项目,可以先运行`npm run build`来编译项目,并将编译后的代码上传到GitHub仓库。 – 如果项目中有使用到路由功能,需要在`router.js`文件中将路由的`base`配置为你的GitHub Pa...
在开始之前,请确保你已经安装了Node.js和npm。接下来,按照以下步骤操作:步骤1:创建Vue项目打开终端,输入以下命令来创建一个新的Vue CLI 3项目: vue create my-vue-project 按照提示选择适合你的配置。步骤2:进入项目目录在创建完项目后,进入项目目录: cd my-vue-project 步骤3:构建生产环境在项目目录下,运行以下...