資訊專欄INFORMATION COLUMN
摘要：使用發(fā)布將項目打包后部署到上是常見需求。需要使用到的庫。關(guān)于的知識，參考使用指南用打造超溜的前端工作流需付費修改此時，雖然可以發(fā)布，但所有相關(guān)的靜態(tài)文件的目錄都是指向的，而實際的靜態(tài)文件的位置是在中。
使用npm-scripts發(fā)布Github Pages
將項目打包后部署到GitHub Pages 上是常見需求。
這里總結(jié)下通過npm-srcrips將項目發(fā)布到gh-pages分支。需要使用到gh-pages的庫。
node
npm 或者yarn
本地項目，需要通過create-react-app創(chuàng)建的React或者vue-cli創(chuàng)建的Vue項目
gh-pages
Github賬戶
過程 1. 在 GitHub 上創(chuàng)建與本地項目同名的遠(yuǎn)程倉庫 2. 創(chuàng)建本地項目React: create-react-app
$ yarn global add create-react-app $ create-react-app my-app
若是使用npm5.2+版本
$ npx create-react-app my-app $ cd my-app $ yarn start
Vue: vue-cli
@vue/cli 3.0
$ yarn global add @vue/cli $ vue create my-app
$ yarn global add @vue/cli-init $ vue init webpack my-app
然后運行項目：
$ cd my-app $ yarn install $ yarn start3.將本地項目 push 到遠(yuǎn)程：
$ git init $ git add . $ git commit -m "create app" $ git remote add origin4.添加npm-scripts：$ git push -u origin master
Vue:
在package.json中添加
"scripts": {
"pregh": "npm run build",
"gh": "gh-pages -d dist"
}
React:
在package.json中添加
"scripts": {
"pregh": "npm run build",
"gh": "gh-pages -d dist"
}
Vue在build時生成的目錄是dist，而React在build時生成的目錄時build。
gh是自定義的腳本名稱，你也可以叫gh-deploy等等。
想要在腳本執(zhí)行之前還另外執(zhí)行其他命令，就在自定義腳本前添加預(yù)處理鉤子，形式是pre加gh腳本名稱。
關(guān)于npm-scripts的知識，參考：
npm scripts 使用指南
用 npm script 打造超溜的前端工作流（需付費）
此時，雖然可以發(fā)布，但所有相關(guān)的靜態(tài)文件的目錄都是指向https://
Vue:
在npm build之前，修改config/index.js的配置：
module.exports = {
...
build: {
...
assetsPublicPath: "", // 此處原來是assetsPublicPath: "/"
...
}
React:
與Vue不同，create-react-app是將所有scripts文件隱藏的。想要將講臺文件指向正確的目錄，是通過在package.json中添加homepage選項。
{
"author": ...,
"homepage": "https://.github.io/",
...
"scripts": { ... }
}
6.生成生產(chǎn)版本，并部署到Github Page
$ npm run gh # or $ yarn run gh
查看遠(yuǎn)程的gh-pages分支，此時分支下應(yīng)包含一個index.html和其他靜態(tài)文件（如static目錄）。
之后就可以通過https://
相關(guān)參考：
React的github pages 發(fā)布，Deploying a React App* to GitHub Pages
如何在 GitHub Pages 上部署 vue-cli 項目
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107162.html
摘要：原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里前言本文介紹如何在多項目間共用同一套基礎(chǔ)設(shè)施，又或是某種層次的框架。而以上所述的種種，就構(gòu)成了一套完整的解決方案，也稱基礎(chǔ)設(shè)施。下面就以從到的改造過程來介紹如何實現(xiàn)多項目共用基礎(chǔ)設(shè)施。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190...
摘要：提供非常方便的功能，讓我們在命令行即可執(zhí)行如等預(yù)定義的命令。所以我開源了庫，讓你在命令行即可方便的管理，通過即可安裝提供個命令列出當(dāng)前的命令在中設(shè)置一個命令刪除中對應(yīng)的命令 npm 提供非常方便的 npm-scripts 功能，讓我們在命令行即可執(zhí)行如 npm start 等預(yù)定義的命令。但是定義命令卻稍顯麻煩，需要打開 package.json 文件，找到 scripts 字段，增加...
摘要：今天有開發(fā)的同事問我說，在本機開發(fā)的上運行構(gòu)建命令報錯，不知道怎么回事兒。比如我們直接在命令行下執(zhí)行都是沒問題的，但結(jié)合到上，卻運行失敗。 今天有開發(fā)的同事問我說，在本機開發(fā)的 windows 上運行構(gòu)建命令報錯，不知道怎么回事兒。作為一名 Mac 用戶，當(dāng)然也不知道為什么啦，過去看看，果然有錯誤。 我們的開發(fā)構(gòu)建命令是基于 npm 的 scripts，其實就是很簡單的一句話： { ...
摘要：實現(xiàn)一個命令完成打包同步上傳服務(wù)器說明由于我們用的七牛云存儲，所以也是走的七牛，所以并不適用于其他的，但是思路可以借鑒打包打包目前我這邊用的是，網(wǎng)上已經(jīng)有很多文章了，這里就不作過多闡述了，只是說一下這個參數(shù)，如果要做同步肯定是要配置這個參 webpack+gulp+qshell+npm-scripts實現(xiàn)一個命令完成[打包+同步cdn+上傳服務(wù)器] 說明 由于我們用的七牛云存儲，所以c...
閱讀 2879·2021-11-22 11:56
閱讀 3597·2021-11-15 11:39
閱讀 926·2021-09-24 09:48
閱讀 789·2021-08-17 10:14
閱讀 1368·2019-08-30 15:55
閱讀 2780·2019-08-30 15:55
閱讀 1343·2019-08-30 15:44
閱讀 2813·2019-08-30 10:59
