项目完成后的打包流程(超级详细)

news2024/11/17 21:23:51

* 打包:
  * 将多个文件压缩合并成一个文件
  * 语法降级
  * less sass ts 语法解析, 解析成css
  * ....

* 打包后,可以生成,浏览器能够直接运行的网页 => 就是需要上线的源码!

最简单的打包流程:

首先我们项目完成后当然是需要add,commit

然后最重要的一步就是设置配置路径,在vue.config.js里面设置publicPath:'./'

下一步我们可以做一个小优化:路由懒加载,去提高页面的加载性能,就是当用户第一次进入这个路由页面才会加载

const Detail = () => import('@/views/detail')
const Register = () => import('@/views/register')
const Login = () => import('@/views/login')
const Article = () => import('@/views/article')
const Collect = () => import('@/views/collect')
const Like = () => import('@/views/like')
const User = () => import('@/views/user')

最后使用 npm run build 生成dist文件

后面我们如果运维大哥需要的话,我们就可以直接发dist文件给他就好啦

实际开发中呢,我们是需要将dist文件部署到服务器上的

所以下一步,就是将我们配置中的.gittgnore中的dist文件注释掉

然后再add,commit 

最后呢,我们需要新建一个git仓库,注意要是空仓库哦

然后我们就按照仓库的提示去上传文件

最后刷新我们的仓库就可以看到了

最后的最后就是部署啦

点击服务的Gitee Pages

然后就是上传我们的指定的文件dist就可以啦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409707.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue项目实现前端预览word和pdf格式文件

最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来。word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇怪怪的bug,但最终总算解决了问题,先看…

HttpServletResponse 类

a)HttpServletResponse 类的作用 HttpServletResponse 类和 HttpServletRequest 类一样。每次请求进来,Tomcat 服务器都会创建一个 Response 对象传 递给 Servlet 程序去使用。HttpServletRequest 表示请求过来的信息,HttpServletResponse 表示所有响应…

解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误

文章目录1. 文章目录2. 分析问题3. 解决错误4. 问题总结1. 文章目录 今天测试小姐姐,在测试某页面时,报出如下图的错误: TypeError: Cannot read properties of null (reading type)at w (http://...xxx.../assets/index.a9f96e7f.js:1052:19…

前端基础,超全html常用标签大汇总

<html></html>标签&#xff0c;整个html文件都会放在html标签里面 <head></head>标签&#xff0c;表示网页的头部信息&#xff0c;一般是为浏览器提供对应的网站需要的相关信息&#xff0c;浏览器中是不会显示的&#xff1b;比如&#xff1a;标题titl…

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

PC端高德地图使用步骤&#xff1a; 1、注册并登录高德开放平台获取 2、安装高德依赖&#xff08;amap-jsapi-loader&#xff09; 3、初始化地图 4、首次打开地图获取当前定位并标记 5、根据已有地址自动定位到指定地址并标记 6、新增、清除标记及自定义信息窗体 7、鼠标点击地…

iframe嵌套其它网站页面及相关知识点详解

在开发过程中会遇到需要 在一个页面中嵌套另外一个页面&#xff0c;就要使用到框架 标签&#xff0c;然后指定src就可以了。 基本语法&#xff1a; <iframe src"需要展示的网站页面的URL"></iframe>用法举例&#xff1a; <!DOCTYPE html> <h…

css ::before ::after 添加伪元素不生效

需求&#xff1a;想用伪元素来写蓝色小标 HTML结构&#xff1a; <div> <span class"course-configname">教程配置</span> </div> 1.一开始这样写&#xff1a;&#xff08;不生效&#xff09; .course-configname::before{content: ;width…

vue3.0-axios拦截器、proxy跨域代理

目录 1. vue-cli 1&#xff09;vue-cli 2&#xff09;安装vue-cli ①解决Windows PowerShell不识别vue命令的问题 3&#xff09;创建项目 4&#xff09;基于vue ui创建vue项目 5&#xff09;基于命令行创建vue项目 2. 组件库 1&#xff09;vue组件库 2&#xff09;v…

Three.js - 透视相机(PerspectiveCamera)(三)

简介 在three.js中&#xff0c;摄像机的作用就是不断的拍摄我们创建好的场景&#xff0c;然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景&#xff0c;就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机&#xff08;PerspectiveCamera&#xff09; 它是用来…

React Hooks(钩子函数)

React Hooks什么是Hooks?UseState()useReducer()useContext()useEffect()useRef()自定义钩子函数React Hooks中可以对性能进行优化的函数useMemo()useCallback()useMemo()和useCallback()的区别什么是Hooks? 首先&#xff1a;React的组件创建方式&#xff0c;一种是类组件&a…

划水日常(16.5)关于出版图书有偿征集书名 ~

关于摸鱼日常已经断更两个月了&#xff0c;前段时间一直忙在项目上&#xff0c;再加上搭了个网站&#xff0c;你要说有事儿吧&#xff0c;其实事儿也不多。你要说没事儿吧&#xff0c;我就是不更。原因其实很简单&#xff0c;我懒&#xff01; 可直接跳过目录一&#xff0c;直至…

web自动化测试入门篇02——selenium安装教程

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

授予渔,从0开始搭建一个自己想要的网页

文章目录视频展示&#xff1a;张娜英网页一.开始阶段1.1考虑出基本的架构1.2填充思路1.3前提准备二.实现阶段2.1导航栏实现2.2点击切换视频2.3 左右特效2.4照片墙2.5视频轮播2.6底部2.7点击切换全局变量3.总结全部代码&#xff1a;☀️作者简介&#xff1a;大家好我是言不及行y…

【实战】React 必会第三方插件 —— Cron 表达式生成器(qnn-react-cron)

文章目录一、引子二、配置使用1.安装2.使用&#xff08;1&#xff09;直接调用&#xff08;2&#xff09;赋值到表单&#xff08;Form&#xff09;&#xff08;3&#xff09;自定义功能按钮&#xff08;4&#xff09;隐藏指定 Tab&#xff08;5&#xff09;其他三、常见问题及解…

【JavaScript 进阶教程】数组新增遍历方法的说明与使用

文章已收录专栏&#xff1a;JavaScript 进阶教程 作者&#xff1a;卡卡西最近怎么样 文章导读&#xff1a; 欢迎来到 JavaScript 进阶的学习&#xff0c;ES5 对 JS 的数组&#xff0c;字符串等内置对象的方法均有扩充。这篇文章我们要掌握的是新增的几个 Array 内置对象的常用迭…

【Web理论篇】Web应用程序安全与风险

目录&#x1f332;1.Web应用程序的发展历程&#x1f342;1.1 Web应用程序的常见功能&#x1f342;1.2 Web应用程序的优点&#x1f332;2.Web安全&#x1f342;2.1Web应用程序常见漏洞&#x1f342;2.2未对用户输入做过滤&#x1f342;2.3 造成这些漏洞的原因是什么呢&#xff1…

【实战分享】js生成word(docx),以及将word转成pdf解决方案分享

本文将记录如何用js生成word文件&#xff0c;并在node服务器端将word转换成pdf。记录的代码均是在真实业务场景中使用成功的代码&#xff0c;没有记录中间踩坑的过程。想直接抄答案的家人们可以跳转到1.2 程序编写部分&#xff0c;最终效果图可在1.2 程序编写部分中4. 效果展示…

【解决前端报错】Bad Request: Required request parameter ‘id‘ for method parameter type Long is not present

后端查询列表接口返回的对象里包含Long id,前端获取到这个id,执行通过Long id删除操作。这时删除操作报错400&#xff0c;大意是没找着Long类型的id. swagger相关接口截图&#xff1a; Long类型的在swagger显示是integer64 &#xff0c; integer是integer32. 这是前端请求后…

微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件,可预览和下载 office 文件(doc / xls / ppt / pdf 等)适用于任何前端技术栈网站,兼容安卓和苹果系统!

前言 网上的教程都是让你写页面 “引导” 右上角三个点里,让用户自己去浏览器打开,其实这样用户体验并不好。 本文实现了 最新微信公众号 H5 网页(微信内置浏览器中),预览下载 office 文件,安卓和苹果全都支持! 您可以直接复制代码,移植到自己项目中去,任何前端项目(…

全网超详细的【Axure】Axure RP 9的下载、安装、中文字体、授权

文章目录1. 文章引言2. 下载Axure93. 安装Axure94. Axure9中文5. Axure9授权1. 文章引言 最近在学习原型图&#xff0c;针对画原型图的工具&#xff0c;反复对比墨刀、Axure、xiaopiu后&#xff0c;最终选择了Axure。 接下来&#xff0c;我便从Axure RP 9的下载、安装、中文字…