欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue cli 3.x 項目部署到 github pages的方法

 更新時間:2019年04月17日 08:21:14   作者:Steve_Xu  
這篇文章主要介紹了vue cli 3.x 項目部署到 github pages的方法,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下

github pages 是 github 免費為用戶提供的服務(wù),寫博客,或者部署一些純靜態(tài)項目。

最近將 vue cli 3.x 初始化項目部署到 github pages,踩了一些坑,記錄如下。

https://github.com/nusr/resume-vue

1. vue-router 不要開啟 history 模式

路徑中的 # 比較丑,就開啟了 vue-router 的 history 模式,去掉了 #。平時做項目也是默認(rèn)開啟 history 模式。折騰了半天發(fā)現(xiàn),我這是部署到 github pages ,服務(wù)器沒有配置,導(dǎo)致頁面一直請求不到。

2. 配置 publicUrl

打包路徑也要單獨配置,否則也是請求不到頁面。

比如我的項目地址是 https://github.com/nusr/resume-vue

我要部署到 https://nusr.github.io/resume-vue,那么 publicPath 要配置為 /resume-vue

// vue.config.js
module.exports = {
 publicPath: process.env.NODE_ENV === "production" ? "/resume-vue" : "/"
};

3. css 引入圖片錯誤

css 引入背景圖片時,開發(fā)環(huán)境沒有任何問題,但是一旦部署后,就無法獲取圖片了。

稍微改下 App.vue 的代碼,暫時解決了這個問題。

<!--App.vue-->
<template>
 <div id="app">
  <router-view />
 </div>
</template>
<script>
export default {
 name: "App",
 mounted() {
  /**
   * 解決 css 引入圖片在 github pages 無法獲取的問題
   */
  const { NODE_ENV } = process.env;
  document.documentElement.className = NODE_ENV;
 }
};
</script>
<style lang="less">
@import "~@/assets/global.less";
</style>

給 html 標(biāo)簽配置了一個頂級類,寫上不同的 css 解決了這個問題。

真時的部署環(huán)境不是這樣的,部署文件夾就是根目錄,但 github pages 部署文件夾不是根目錄,就有這個問題。

// global.less
.development {
 background-image: url(/background.png);
}
.production {
 background-image: url(/resume-vue/background.png)
}

4. 自動部署腳本

根目錄下新建 deploy.sh 文件,文件內(nèi)容如下。

# deploy.sh
# 錯誤時停止
set -e
# 打包
npm run build
# 進(jìn)入目標(biāo)文件夾
cd dist
# 提交到本地倉庫
git init
git add -A
git commit -m 'deploy'
# 提交到 https://github.com:nusr/resume-vue 項目的 gh-pages 分支
git push -f git@github.com:nusr/resume-vue.git master:gh-pages
cd -

部署命令是 bash deploy.sh

開啟 github pages

建立倉庫,倉庫名稱是 username.github.io ,必須是這種格式。

比如我的用戶名是 nusr,建立的倉庫就是 nusr.github.io。

github pages 默認(rèn)開啟分支是 gh-pages,可以進(jìn)入該倉庫頁面,點擊 Settings -> GitHub Pages,切換展示的分支。

GitHub Pages 支持定制域名,支持 jsonp 請求。

參考

1.github pages 官方說明

2.vue cli 3.x 部署官方說明

以上所述是小編給大家介紹的vue cli 3.x 項目部署到 github pages的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • 基于vue2.0實現(xiàn)簡單輪播圖

    基于vue2.0實現(xiàn)簡單輪播圖

    這篇文章主要為大家詳細(xì)介紹了基于vue2.0實現(xiàn)簡單輪播圖,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • Vue中Axios的封裝與接口管理詳解

    Vue中Axios的封裝與接口管理詳解

    在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • VUE-PDF實現(xiàn)pdf在線預(yù)覽問題

    VUE-PDF實現(xiàn)pdf在線預(yù)覽問題

    這篇文章主要介紹了VUE-PDF實現(xiàn)pdf在線預(yù)覽問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 詳解VUE響應(yīng)式原理

    詳解VUE響應(yīng)式原理

    這篇文章主要為大家介紹了vue組件通信的幾種方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • vue實現(xiàn)app頁面切換動畫效果實例

    vue實現(xiàn)app頁面切換動畫效果實例

    本篇文章主要介紹了vue實現(xiàn)app頁面切換動畫效果實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑

    解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑

    本文主要介紹了解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 解決vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)問題

    解決vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)問題

    這篇文章主要介紹了vue 按鈕多次點擊重復(fù)提交數(shù)據(jù)的問題,本文通過實例結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-05-05
  • Vue收集表單數(shù)據(jù)和過濾器總結(jié)

    Vue收集表單數(shù)據(jù)和過濾器總結(jié)

    這篇文章主要介紹了Vue收集表單數(shù)據(jù)和過濾器的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • vue函數(shù)@click.prevent的使用解析

    vue函數(shù)@click.prevent的使用解析

    這篇文章主要介紹了vue函數(shù)@click.prevent的使用解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue實現(xiàn)百分比占比條效果

    vue實現(xiàn)百分比占比條效果

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)百分比占比條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09

最新評論