資訊專欄INFORMATION COLUMN
摘要：前兩天寫了一篇關(guān)于的小米便簽項(xiàng)目實(shí)例，有網(wǎng)友建議增加在線預(yù)覽的效果，然后在上增加可預(yù)覽項(xiàng)目時(shí)遇到并解決一些問題，在這給大家做個(gè)分享。
前兩天寫了一篇關(guān)于vuex2.0的小米便簽項(xiàng)目實(shí)例，有網(wǎng)友建議增加在線預(yù)覽的效果，然后在github上增加可預(yù)覽項(xiàng)目時(shí)遇到并解決一些問題，在這給大家做個(gè)分享。
我的小米便簽項(xiàng)目是用vue-cli腳手架構(gòu)建的，在執(zhí)行npm run build命令之后會(huì)對(duì)項(xiàng)目進(jìn)行編譯打包，并在項(xiàng)目中生產(chǎn)dist文件夾，壓縮后的文件都在dist文件夾中。
然而，在push項(xiàng)目到github上時(shí)發(fā)現(xiàn)，dist文件夾并沒有上傳上去，經(jīng)過一番摸索之后找到了問題。
忽略文件對(duì)比github上和本地文件之后，發(fā)現(xiàn)最重要的dist文件沒有被提交到github上，如下圖：
dist文件是npm run build執(zhí)行后被編譯打包生成的文件，CSS、JS、圖片等文件都在dist文件中，所以該文件必須要提交到github上。
在項(xiàng)目根目錄下有一個(gè).gitignore文件，文件中設(shè)置一些文件名，對(duì)應(yīng)的文件將不會(huì)被提交到github上面。
在.gitignore文件中，有dist等不被上傳的文件名稱，如下圖：
解決方法：把.gitignore文件中的dist文件名刪除，然后重新push到github上就有dist文件了。
路徑問題dist文件上傳成功后，打開該文件路徑下的github pages預(yù)覽地址，在進(jìn)行預(yù)覽的時(shí)候又發(fā)現(xiàn)一個(gè)問題 路徑問題。
查看控制臺(tái)，可以看到文件的路徑都出現(xiàn)了問題，如下圖:
發(fā)現(xiàn)文件的路徑都是/根路徑,我們總不能把static文件移動(dòng)到根目路徑下吧，那樣就太low了。
所以我們要找到配置文件更改下路徑，找到config/index.js文件，如下圖：
修改圖中assetsPublicPath的參數(shù)：assetsPublicPath: "./"或者assetsPublicPath: ""，修改后，每次執(zhí)行npm run build后文件路徑將會(huì)按照參數(shù)生成。
這樣設(shè)置之后，再次npm run build，重新push到github上面，打開
這就是我在增加可預(yù)覽地址時(shí)遇到的一些問題，在這分享出來，希望能幫助到需要幫助的人。
來都來了點(diǎn)一下贊吧，你的贊是對(duì)我最大的鼓勵(lì)^_^
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94962.html
摘要：一前言提綱基于和框架寫的一個(gè)全棧購(gòu)物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請(qǐng)證書全站升級(jí)到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫的一個(gè)全棧購(gòu)物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看 這個(gè)分支版本是一兩年前...
摘要：一前言提綱基于和框架寫的一個(gè)全棧購(gòu)物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請(qǐng)證書全站升級(jí)到，配置的協(xié)議。 一、前言提綱 基于Vue和Express框架寫的一個(gè)全棧購(gòu)物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看這個(gè)分支版本是一兩...
摘要：項(xiàng)目打包后上傳至，并實(shí)現(xiàn)的預(yù)覽打包項(xiàng)目項(xiàng)目命令行輸入打包命令，生成了文件夾打包完成。參考各位大佬求教一個(gè)問題項(xiàng)目打包后如何上傳到實(shí)現(xiàn)預(yù)覽上傳本地項(xiàng)目到和預(yù)覽使用數(shù)據(jù)怎么加載本地?cái)?shù)據(jù)能讓項(xiàng)目在上預(yù)覽 vue項(xiàng)目打包后上傳至GitHub，并實(shí)現(xiàn)github-pages的預(yù)覽 1. 打包vue 項(xiàng)目 vue項(xiàng)目：showImg(https://segmentfault.com/img/bVb...
摘要：無需使用服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時(shí)簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運(yùn)行環(huán)境。更多的服務(wù)器端負(fù)載。 目錄結(jié)構(gòu) -no-ssr-demo 未做ssr之前的項(xiàng)目代碼用于對(duì)比 -vuecli2ssr 將vuecli生成的項(xiàng)目轉(zhuǎn)為ssr -prerender-demo 使用prer...
閱讀 1030·2021-09-22 15:26
閱讀 2607·2021-09-09 11:52
閱讀 1890·2021-09-02 09:52
閱讀 2241·2021-08-12 13:28
閱讀 1180·2019-08-30 15:53
閱讀 506·2019-08-29 13:47
閱讀 3380·2019-08-29 11:00
閱讀 3095·2019-08-29 10:58
