前端学习(2461):打包发布

# 十、打包发布## 构建打包在发布上线之前,我们需要执行构建打包,将 `.less`、`.vue`、`.js` 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 `css`、`js`、`html`。```bash
# yarn run build 或者 yarn build
npm run build
```VueCLI 会把打包结果生成存储到项目的 `dist` 目录中。正确的话应该会得到这样一个打包结果:![image-20191122100014192](assets/image-20191122100014192.png)## 关于代码中的 consoleconsole.log 只是用于开发测试使用,发布上线的话没有意义,所以 VueCLI 在打包构建的就是就给你报错不打包了。正确的做法:```
移除项目中所有的 console
```为了给大家快速演示打包,我先手动把 console 校验关闭。## 本地预览测试打包结果> 注意:不能直接双击打开 index.html 运行。将 dist 放到一个 Web 服务器中运行测试,常见的 Web 服务器:- Ngxin
- Apache
- tomcat
- IIS
- 。。。。
- Node.js前端安装配置上面的服务器软件麻烦,这里推荐使用 Vue 官方推荐的一个命令行 http 服务工具:[serve](https://github.com/zeit/serve)。`dist` 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 `publicPath` 配置为了一个相对的值),所以以 `file://` 协议直接打开 `dist/index.html` 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 [serve](https://github.com/zeit/serve):安装:```bash
# yarn global add serve
# 注意:这是在安装全局包,在任何目录执行都可以
# 安装一次就可以了,以后不需要重复安装,顶多升级重装
npm install -g serve
```然后在你的项目目录下执行:```bash
# dist 是运行 Web 服务根目录
serve -s dist
```如果启动成功,你将看到如下提示:```┌────────────────────────────────────────────────────┐│                                                    ││   Serving!                                         ││                                                    ││   - Local:            http://localhost:5000        ││   - On Your Network:  http://192.168.156.90:5000   ││                                                    ││   Copied local address to clipboard!               ││                                                    │└────────────────────────────────────────────────────┘
```> serve 默认占用 5000 端口并启动一个服务然后在浏览器中访问给出的地址访问测试。你自己先大概的测试一下,确保打包结果可以正常运行,然后交由专业的测试人员进行测试。如果测试出问题怎么办?- 修改 src 源代码
- 重新构建打包> 注意:
>
> 不要去修改 dist 中的文件代码,没有用。
>
> 因为每次 `npm run build` 都会先把原来的 dist 删除,然后生成新的结果。## 部署- 公司有专门的 devops,说白了就是运维- 有些公司没有专门的运维人员,那就后端负责
- 你只需要把打包结果给人家就可以了如果想要自己部署,怎么办?- 买一个服务器- 安装服务器运行环境- 阿里云、腾讯云、....
- 买个域名(非必须)- 第一次买非常便宜,几十块钱,续费非常贵
- 把项目代码推送到你的部署服务端
- 部署```js
购买一个能24小时不关机的电脑(有了)安装配置服务器软件把你的项目打包结构扔到服务器的 Web 服务软件中阿里云(推荐)、腾讯云、百度云、
购买域名(非必须,也可以直接使用ip地址,只不过不好记)
```## GitHub PagesGitHub Pages 是 GitHub 提供的一种免费托管静态网站的服务功能。什么是静态网站?它只能处理纯粹的静态文件,例如 html、css、js、图片等资源,它不提供对 Java、PHP、Node.js、Python 等动态服务。Vue 项目编译之后得到的不就是:纯粹的静态文件吗?很多知名的技术网站都部署在 GitHub Pages 中:- Vue.js 官方文档
- Angular 官方文档
- React 官方文档
- toutiao-publish.lipengzhou.com所以仅适合纯静态资源:技术文档,个人博客...。### 使用 GitHub Pages### 关于默认域名GitHub Pages 提供了免费域名:- `用户名.github.io/仓库名/`- 可以有多个
- `用户名.github.io`- 只能有1个- 比较简洁,后面不用跟具体的仓库名称- 创建好以后它会直接帮你开启 GitHub Pages 功能当然了,也可以自定义域名。### 自定义域名首先,你要有一个自己的域名。- 阿里云万网
- 新网
- godaddy
- ...1、登录你的域名管理后台,添加一个 CNAME 记录```
lipengzhou.combaidu.com
jd.com
taobao.coma.taobao.comb.taobao.comxxxx```2、在需要自定义域名的仓库中添加一个 `CNAME` 文件,里面写你自定义的那个域名。## 扩展:GitHub PagesGitHub 也提供了静态文件服务的功能,所谓的静态文件服务仅仅针对纯粹的 html、css、js 等文件托管。它不能部署后端服务,例如 Java、Node.js、PHP 等都不行。有了它,我们就能免费薅羊毛。我们能使用它部署自己的博客、学习测试的网站等都可以玩儿了 。### 把静态文件推到 github 仓库### 开启 GitHub Pages 服务![image-20191122102749549](assets/image-20191122102749549.png)![image-20191122103010519](assets/image-20191122103010519.png)> 将 source 设置为你的 HTML 文件所在的分支![image-20191122103055184](assets/image-20191122103055184.png)> 提示成功,往下滚动,找到给出的访问地址![image-20191122103125360](assets/image-20191122103125360.png)> 访问图示中给出的地址### 关于域名#### 默认域名GitHub 支持两种域名方式:- 一种是:`你的用户id.github.io`- 只能有一个- 一种是:`你的用户id.github.io/xxx`- 可以有任意个对于第一种,你必须创建一个名字叫 `你的用户id.github.io` 的仓库,那么该仓库启用 GitHub Pages 之后默认域名就是:`你的用户id.github.io`。对于第二种,仓库名字就无所谓了,托管到 GitHub Pages 的域名都是 `你的用户id.github.io/仓库名称`。#### 自定义域名GitHub 同时也支持自定义域名,前提是你得有一个个域名,推荐从以下渠道购买:- [阿里云 - 万网](https://wanwang.aliyun.com/)
- [GoDaddy](https://www.godaddy.com/)
- [新网](http://www.xinnet.com/)
- ...接下来推荐阅读:[三步搞定 Github Pages 自定义域名](https://www.jianshu.com/p/2647e079741f)。## 将我们的项目部署到 GitHub Pages1、准备一个自己的域名- GitHub 默认的免费域名强制开启 https
- 在 https 协议中无法发出 http 请求
- 我们项目中使用的接口都是 http 协议的,所以需要准备一个自己的域名,因为自定义域名可以选择使用 http 协议或者 https 协议
- 或者你让接口开发者为接口服务提供 https 的支持2、在域名管理后台添加 `CNAME` 记录<img src="assets/image-20200504103846616.png" alt="image-20200504103846616" style="zoom:50%;" />3、在项目的 `public` 目录中添加 `CNAME` 文件```
toutiuao.lipengzhou.com
```4、生成 GitHub 访问令牌<img src="assets/image-20200504111407287.png" alt="image-20200504111407287"  />> 点击用户设置![image-20200504111438466](assets/image-20200504111438466.png)> 选择 Developer settings![image-20200504111501071](assets/image-20200504111501071.png)> 选择 Personal access tokens -> Generate new token![image-20200504111544004](assets/image-20200504111544004.png)> Node: ![image-20200504111553245](assets/image-20200504111553245.png)![image-20200504111613344](assets/image-20200504111613344.png)> token 仅显示1次,之后无法查看,所以建议把 token 保存到你的私密位置。5、创建远程仓库(如果已经创建则不需要了)6、将 GitHub 访问令牌添加到远程仓库的 secrets 中![image-20200504105001784](assets/image-20200504105001784.png)![image-20200504105100177](assets/image-20200504105100177.png)> Name:`ACCESS_TOKEN`
>
> Value: `之前生成的 GitHub 访问令牌`![image-20200504105206061](assets/image-20200504105206061.png)> 添加成功了7、在项目根目录中添加 `.github/workflows/main.yml````yaml
name: build and deploy# 当 master 分支 push 代码的时候触发 workflow
on:push:branches:- masterjobs:build-deploy:runs-on: ubuntu-lateststeps:# 下载仓库代码- uses: actions/checkout@v2# 缓存依赖- name: Get yarn cacheid: yarn-cacherun: echo "::set-output name=dir::$(yarn cache dir)"- uses: actions/cache@v1with:path: ${{ steps.yarn-cache.outputs.dir }}key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}restore-keys: |${{ runner.os }}-yarn-# 安装依赖- run: yarn# 打包构建- run: yarn build# 发布到 GitHub Pages- name: Deployuses: peaceiris/actions-gh-pages@v2env:PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 访问秘钥PUBLISH_BRANCH: gh-pages # 推送分支PUBLISH_DIR: ./dist # 部署目录
```> 有兴趣的话可以了解一下:GitHub Action,不建议大家现在去折腾这个东西。8、把项目代码推送到远程仓库9、查看构建部署状态(它需要执行一个构建部署的流程,没那么快)最后就是如何更新项目网站?```
很简单,修改源代码,把更新提交到远程仓库即可。
说白了你可以忽略网站部署这件事儿了。
```然后你可以通过仓库中的 Action 查看构建部署状态(非必须)。不想看的话就等一会儿就可以了。如果打算将项目部署到 `https://.github.io/` 上, `publicPath` 将默认被设为 `"/"`,你可以忽略这个参数。如果打算将项目部署到 `https://.github.io//` 上 (即仓库地址为 `https://github.com//`),可将 `publicPath` 设为 `"//"`。举个例子,如果仓库名字为“my-project”,那么 `vue.config.js` 的内容应如下所示:```js
module.exports = {publicPath: process.env.NODE_ENV === "production" ? "/my-project/" : "/"
};
```修改完配置文件只有,要重新构建,然后将新的打包结果推到仓库才能生效。推送的时候,为了方便,建议直接加上 `--force` 参数,强制推送。```bash
# --force 强制推送,简写 -f
git push -u origin master -f
```## 搭建自己的个人网站- WordPress- 基于 PHP 开发的一个开源的网站工具- 它不能部署到 GitHub Pages,因为它需要 PHP 允许环境- 如果你想玩儿这个东西,我建议买个服务器,然后搭建 WordPress
- Ghost- 基于 Node.js 构建的一个开源的网站程序类似于 WordPress、Ghost 比较适合普通用户,它们都有管理后台,管理发布的内容。还有一种网站工具:静态网站生成器,这类的工具可以把 Markdown 文件转换为 HTML 文件,而且还有漂亮的外壳。- Hexo
- Vuepress- Vue 官方开发的一个制作静态网站的工具- Vue 的官方文档都是基于它做的- 也可以做博客,因为它有博客插件

 

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

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

相关文章

网路爬虫 来源

网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff0c;在FOAF社区中间&#xff0c;更经常的称为网页追逐者&#xff09;&#xff0c;是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟…

前端学习(2462):打包优化

# 十一、打包优化> 学习打包优化前需要了解 webpack。所谓的优化主要涉及到两方面&#xff1a;- 构建速度的优化 - 构建质量的优化大多数 Vue 项目是基于 VueCLI 搭建的&#xff0c;而 VueCLI 的底层建筑是 webpack。webpack 是现在主流的功能强大的模块化打包工具&#xff…

火星探险问题

此题oj上无spj&#xff0c;无法提交 【问题分析】 最大费用最大流问题。 【建模方法】 把网格中每个位置拆分成网络中两个节点<i.a>,<i.b>&#xff0c;建立附加源S汇T。 1、对于每个顶点i&#xff0c;j为i东边或南边相邻的一个节点&#xff0c;连接节点<i.b>…

对BOM的总结

参考&#xff1a;JavaScript半知半解 TG著 BOM对象 Window对象是客户端JavaScript程序的全局对象。 Window对象使得JavaScript与浏览器进行交互。 所有的JavaScript全局对象&#xff0c;函数以及变量均自动成为window对象的属性和方法。 Document对象也是window对象的成员。 Wi…

SpringBoot增删改查接口实例

前言 增删改查是后端最基本的技能。下面我就带领小伙伴们通过一个简单的示例来讲解SpringBoot的增删改查。Spring Boot框架层次从上至下可分为5层&#xff1a;分别为View层&#xff0c;Controller层&#xff0c;Service层&#xff0c;Mapper层&#xff0c;Model层 1. View层&a…

前端学习(2459):账户设置

# 八、账户设置## 创建页面组件并配置路由1、创建 src/views/account/index.vue 组件html <template><div><el-form ref"form" :model"form" label-width"80px"><el-form-item label"用户头像"><el-upload…

C# 依据KeyEventArgs与组合键字符串相互转换

/// 快捷键相关的类/// </summary>public static class HotKeyInfo{/// <summary>/// 依据KeyEventArgs生成组合键字符串/// </summary>/// <param name"e"></param>/// <returns></returns>public static string GetStri…

lpc2000 filash utility 程序烧写工具_单片机烧录程序的次数

单片机是可编程器件&#xff0c;开发者把程序写好、编译完之后&#xff0c;需要烧录到单片机中&#xff0c;单片机才能按照开发者的逻辑去执行。在这个烧录的过程中需要用到专用的烧录工具。比如51单片机的USB/TTL、STM单片机的STlink等。使用过单片机开发板的同学都清楚&#…

工作总结21:阅读代码之axios

/*基础接口请求地址*/ const apiBaseUrl "http://xxxxxxxx";/*创建instance实例*/ const service axios.create({baseURL: apiBaseUrl,timeout: 10000 }); 读懂该接口 这边是设置的基础url

工作总结22:拦截器

//设置拦截器 拦截 // request interceptor service.interceptors.request.use(config > {const token Vue.ls.get(ACCESS_TOKEN);// if (token) {// config.headers["X-Access-Token"] token; // 让每个请求携带自定义 token 请根据实际情况自行修改// }retu…

ug建模文本怎么竖着_入门到成为UG编程高手,这些步骤你不得不了解

入门到成为UG编程高手&#xff0c;这些步骤你不得不了解加工中心是数控设备的一种&#xff0c;日常的作业离不开数控加工&#xff0c;编程是要害。我们常见的编程软件有不少&#xff0c;mastercam、cimatron、ug、powermill、hypermill等等许多不同的软件&#xff0c;不同的编程…

工作23:vue---封装request做数据请求

import axios from axios// 创建一个axios实例 const service axios.create({// headers: {// content-type: application/json;charsetUTF-8,// token: one // },baseURL: http://dianphp.fyz.com,withCredentials: true,timeout: 5000 })// 添加请求拦截器 service.inte…

华为手机记事本导出_深夜浅谈怎样用一部手机做电影解说?

小编从兴趣而至&#xff0c;到开始做第一部电影解说已经过去半个月了&#xff0c;作品也发布了三部&#xff0c;全程没用过一次电脑&#xff0c;自己之前也没接触过专业的软件&#xff0c;什么PR&#xff0c;AU之类的一概不懂&#xff0c;全程一部手机&#xff0c;只用剪映&…

MySQL多项模糊查询

最近有个需求&#xff0c;就是要根据搜索框里面的关键字&#xff0c;找到符合条件的数据。 如果是单个条件的话&#xff0c;其实就是一个普通的select语句。 但是需求是这个关键字&#xff0c;要在id&#xff0c;desc&#xff0c;step等多个字段模糊查找。 然后最直观的一个思路…

工作24:封装请求

import { axios } from "./axios";export { axios };export function httpAction(url, parameter, method) {return axios({url: url,method: method,data: parameter}); } /*封装系统需要的post请求 第一个参数传入url地址 第二个传入数据参数*/ export function po…

保存的图数据丢失_锡柴自主刷写和备份共享数据文件使用介绍

刷写功能锡柴自主 ECU刷写可以恢复损坏的数据或是新ECU刷上相应车型的数据注意事项确认车辆电瓶电量充足&#xff0c;平板电脑电量充足。发动机不启动。车辆处于刹车状态。建议使用USB线进行刷写可以提高刷写速度。部分车上其它系统对刷写有影响&#xff0c;可拆下来在车下接线…

设置MySQL自动增长从某个指定的数开始

设置一个自增字段&#xff0c;必须为primary key。 设置uid以1001开始自增长。 CREATE TABLE user (uid int(11) NOT NULL PRIMARY KEY,username varchar(20) DEFAULT NULL,password varchar(40) DEFAULT NULL,email varchar(20) DEFAULT NULL,phone varchar(15) DEFAULT NULL,…

用户思维模型,围绕用户核心四大模块,拉新、养熟、成交、裂变循环的效果...

用户思维模型&#xff0c;围绕用户核心四大模块&#xff0c;拉新、养熟、成交、裂变循环的效果 用户思维模型1、拉新越勾引人的诱惑设计&#xff0c;借力软文、好友、大V、媒体等推广的方法来获得源源不断高质量的粉丝&#xff0c;给予别人有价值的东西才能心甘情愿的成为你的粉…