一、如何將vue初始項目發布到github上

ixlei 發布于2019-08-21 15:50 / 2435人閱讀

摘要：使用構建一個新項目發布到上并瀏覽一項目的創建首先第一肯定是要有及這個不多說了安裝腳手架此時可以直接瀏覽但是現在肯定有很多小白想將他發布到上并可以瀏覽，使用全家桶制作自己的博客。

使用vue-cli構建一個新項目發布到github上并瀏覽 一、vue項目的創建

1、首先第一肯定是要有Node.js及npm這個不多說了
2、安裝腳手架

此時可以直接瀏覽
-但是現在肯定有很多小白想將他發布到gitHub上并可以瀏覽，使用vue全家桶制作自己的博客。

現在就有我來說說如何講vue項目發布到github上

二、vue項目的打包

1、大家都知道使用npm run build進行打包，這個時候你直接打開dist/下的index.html,會發現文件可以打開，但是所有的js，css，img等路徑有問題是指向根目錄的，此時需要修改config/index.js里的assetsPublicPath的字段，初始項目是/他是指向項目根目錄的也是為什么會出現錯誤，這時改為./

  build: {
    env: require("./prod.env"),
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "./",
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

在從dist根目錄打開index文件就可以訪問了。

三、github pages

1、首頁創建一個倉庫，此處直接忽略

2、在這里選擇master或者/doc 上傳代碼到master

3、上面有一行域名就是你自己的頁面可以看到自己發布的項目

四、自定義域名

1、這個時候就可以瀏覽自己的項目了，但是

username.github.io/xxx/dist
這樣的地址著實不是很美觀，大家可以去阿里云上，自己買個域名，解析一下，網上都有，可以進行自定義的域名，來制作的自己的博客，代碼部署到github上。這篇文章這里就先不做講解了，有想使用自定義域名，也可以私信我。

總結

這里發布頁面，其實最主要的時候坑是路徑問題，需要修改配置文件，大家沒事可以多多瀏覽文檔了解vue的整體架構邏輯，后續再給大家帶來框架從入門到放棄。

項目地址：
https://github.com/zhengjianl...

預覽地址：
https://zhengjianli126.github...

后續會就在這個目錄一步一步拆分給大家帶來如何使用vue2全家桶+webpack2構建一個博客

云服務器 GPU云服務器如何將網頁發布到阿里云服務器上將項目發布到阿里云服務器上怎么將項目發布到阿里云服務器上將項目部署到云服務器上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88284.html

如何在github上創建個人項目的在線演示demo

摘要：在上搜索相關項目時會發現，有的項目不光寫了一手好文檔并且還給出了項目的在線運行。如何在維護源代碼的同時并同時生成項目主頁以下以的單頁應用為例，給出完整的項目維護以及生成項目主頁的步驟。后期可在該基礎上進行自己項目的開發。前言 Github作為目前優秀的同性交友平臺，其上維護了眾多優秀的開源項目。目前Github上關于前端的項目也是數不勝數，Vue、React、Angular等等。自己...

kid143 2019-08-20 14:26 評論0 收藏0
Vue2學習之旅一：初始化項目搭建（不帶路由）

摘要：除此之外，你還可以運行打包命令此時之前說的打包生成的文件應該就生成了，或者選擇用瀏覽器打開應該也可以看見和剛剛一樣的結果。而如何創建一個對象是知道，因此開頭引入了，并使用它常見了一個對象，然后這個對象就管理了這一塊區域。作者：心葉時間：2018-04-25 16:33 本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...

lijy91 2019-08-22 16:43 評論0 收藏0
快速入門 - Vue2 Tutorials (一)

摘要：在這個組件里面有一些鏈接列表，和，這些列表直接使用編寫按照傳統的寫法，如果我們需要往里面添加鏈接的時候，每次我們都得添加和標簽。所以修改如下這樣我們就把數據和視圖分開了，模板里面的代碼也簡潔了很多，不再需要寫很多重復的代碼。 Vue 的官方文檔對 Vue 介紹非常詳細，但官方文檔使用在 HTML 中引入 vue 的方式進行講解，而實際項目中一般使用腳手架如 vue-cli 初始化項目...

djfml 2019-08-20 17:47 評論0 收藏0
vue服務端渲染demo將vue-cli生成的項目轉為ssr

摘要：無需使用服務器實時動態編譯，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同，服務器渲染應用程序，需要處于運行環境。更多的服務器端負載。目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 評論0 收藏0
如何更有效率和質量地開發Vue項目

摘要：前言自總結完了上篇前端工程化的思想，并在全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發項目，以及其中踩過的一個個坑。。。前言自總結完了上篇前端工程化的思想，并在vue全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發vue項目，以及其中踩過的一個個坑。。。基于vue-cli的自定義模板（Custom Templates）小伙伴們的vue項目應該都...

ShevaKuilin 2019-08-20 18:15 評論0 收藏0