# 十、打包發布## 構建打包在發布上線之前，我們需要執行構建打包，將 `.less`、`.vue`、`.js` 等相關資源進行編譯打包，轉換成瀏覽器可以直接識別運行的普通 `css`、`js`、`html`。```bash # yarn run build 或者 yarn build npm run build ```VueCLI 會把打包結果生成存儲到項目的 `dist` 目錄中。正確的話應該會得到這樣一個打包結果：## 關于代碼中的 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 服務> 將 source 設置為你的 HTML 文件所在的分支> 提示成功，往下滾動，找到給出的訪問地址> 訪問圖示中給出的地址### 關于域名#### 默認域名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" />> 點擊用戶設置> 選擇 Developer settings> 選擇 Personal access tokens -> Generate new token> Node: > token 僅顯示1次，之后無法查看，所以建議把 token 保存到你的私密位置。5、創建遠程倉庫（如果已經創建則不需要了）6、將 GitHub 訪問令牌添加到遠程倉庫的 secrets 中> Name：`ACCESS_TOKEN` > > Value: `之前生成的 GitHub 訪問令牌`> 添加成功了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 的官方文檔都是基于它做的- 也可以做博客，因為它有博客插件

?

總結

以上是生活随笔為你收集整理的前端学习（2461）：打包发布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。