使用Netlify进行简单部署

目的

本次我们将使用Netlify进行简单部署这个项目,Neylify提供了免费且强大的托管服务;

  • 在此之前,我们重新处理一下我们package,json,让其可以更好的被构建,我们加入一些关于parcel构建的输出之类的参数
js 复制代码
    "start": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"   },   "author": "ItShare",   "license": "ISC",   "dependencies": {
    "core-js": "^3.6.5",
    "fraction": "^0.2.0",
    "parcel": "^2.0.0-beta.1",
    "regenerator-runtime": "^0.13.7",
    "sass": "^1.26.10"   } }
  • 之后我们来构建这个项目
js 复制代码
npm run bulid

构建完成之后你就会得到一个dist的目录,有了这个目录我们就可以去部署了

  • 我们部署的网页就是这个网页,可以网站可以允许我们免费的使用它部署前端项目
  • 登录之后是这个界面
  • 之后就很简单了,我们只需要将我们dist的目录拖到这个网站上就自动的部署了
  • 然后点击链接就可以正常的访问了
  • 这个网站也可以对项目进行一些的配置,比如我们可以更改项目名称

后面我们将在学习一些关于版本控制和GIT的使用,这个是每个程序员都必须要掌握的知识哦;

相关推荐
jktantan7 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么7 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
前端精髓8 小时前
调用openrouter的免费API模型
java·前端·javascript
螺丝钉tina14 小时前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
开开心心就好15 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
এ慕ོ冬℘゜15 小时前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript
web打印社区15 小时前
Lodop排障总纲-常见报错一张表
开发语言·前端·javascript·chrome·websocket
程序员大阳16 小时前
副队长JavaScript教程(56)-DOM之表单操作
javascript·dom·表单操作
Dxy123931021617 小时前
JS AES加密详解
开发语言·javascript·ecmascript
FRing0317 小时前
JavaScript入门到精通三十三(异常处理、call方法、apply方法、bind方法、防抖、节流)
开发语言·前端·javascript